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();
标签:200,canvas,arcTo,ctx,圆角,H5,画圆,100 来源: https://blog.csdn.net/weixin_45696837/article/details/120923909