H5-笔记

在画圆的时候，使用下面的方法

arc(x,y,r,start,stop)

画布的左上角坐标为0,0

•  x：圆心在x轴上的坐标
•  y：圆心在y轴上的坐标
•  r：半径长度
•  start：起始角度，以弧度表示，圆心平行的右端为0度
•  stop：结束角度，以弧度表示

注意：Math.PI表示180°，画圆的方向是顺时针

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(250,250,250,0,Math.PI);
ctx.stroke();
<p></script>

制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:

•  x: 渐变的开始圆的 x 坐标
•  y: 渐变的开始圆的 y 坐标
•  r: 开始圆的半径
•  x1: 渐变的结束圆的 x 坐标
•  y1: 渐变的结束圆的 y 坐标
•  r1: 结束圆的半径

(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建径向渐变
var grd=ctx.createRadialGradient(150,150,5,150,150,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(50,50,250,250);

转自：菜鸟教程