在画圆的时候,使用下面的方法
arc(x,y,r,start,stop)
(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>
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);
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);