H5 canvas 画圆 画圆角

canvas是H5的一大重点
我们来学一下如何用canvas画圆

画圆

arc(x,y,r,起始弧度，结束弧度，顺逆时针)

• x,y就是这个圆的圆心坐标
• r是圆的半径
• 弧度单位用Math.PI
• 顺逆时针用0(顺时针) 1(逆时针)

const cas = document.getElementsByTagName('canvas')[0];
const ctx = cas.getContext("2d");

ctx.arc(250,250,100,0,Math.PI / 2,1);
ctx.stroke();

起始点和终点相同，但顺逆时针画出来是不太一样的

const cas = document.getElementsByTagName('canvas')[0];
const ctx = cas.getContext("2d");

ctx.arc(250,250,100,0,Math.PI / 2,0);
ctx.stroke();

上面那个圆，我们换个方向，顺时针

画圆角

我们先来理解一个canvas中圆角的画法。
我们要认识3个点

arcTo(bx,by,cx,cy,圆角大小)

圆角的大小我解释一下：就是那个切圆角的正圆的半径。

如果上面那个图你看懂了，那么我来画一个圆角矩形，看你是否真的理解

var can = document.getElementsByTagName('canvas')[0];
var ctx = can.getContext('2d');

ctx.moveTo(100,110); // 为什么不是100 100
// 你可以改成100,看到底会出现什么问题
ctx.arcTo(100,200,105,200,10);

ctx.arcTo(200,200,200,199,10);
ctx.arcTo(200,100,199,100,10);
ctx.arcTo(100,100,100,105,10);
ctx.stroke();