游泳圈

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”

详细说明

广东的夏天，不是宫崎骏笔下那充满蝉鸣的夏天，它就像一个烤炉一样，炙烤着大地以及人们。这时候待在沙滩吹着海风或者在泳池里畅快地游泳。不会游泳的人可以在浅滩区或者带着游泳圈，这种天气泡在水里是一件多么舒服的事啊。
说到游泳圈，好像我也不会游泳，需要游泳圈的话，那我就趁这个机会画一个免费的游泳圈吧。

使用canvas来画一个游泳圈，首先需要在html上画一个画布，后面我们就可以在画布里绘制游泳圈了。

<canvas width='500' height='400' id='canvas'></canvas>

再给这个画布添加个阴影效果，这个画布就有个卡片的效果

#canvas {
  margin: 0 100px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 4px #ccc;
}

在画布上创建一条放射颜色渐变，传入开始圆的中心点位置（x1,y1）和半径r1、结束圆的中心点位置（x2，y2）和半径r2，两个圆的圆心一定要是一样的，这样才能形成一个远圆环。接下来就是给圆环填充颜色，首位的颜色略深点，中间的颜色略浅点，这样的渐变色能表现的立体感。最后再填充一下就可以展现出一个游泳圈了。

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
let gradient = context.createRadialGradient(250, 200, 80, 250, 200, 150);
gradient.addColorStop(0, '#e8b070');
gradient.addColorStop(0.5, '#f8d53a');
gradient.addColorStop(1, '#e8b070');
context.fillStyle = gradient;
context.arc(250, 200, 80, 0, 2*Math.PI, true);
context.arc(250, 200, 150, 0, 2*Math.PI);
context.fill();