补充:
fill法法会自动执行closePath然后再进行填充;
ctx.rect(100,50,100,100);
ctx.stroke();
//描边矩形
ctx.strokeRect(100,200,200,100);
//填充矩形,默认填充黑色
ctx.fillRect(100,350,300,200);
ctx.clearRect(200,200,100,100);//(x,y,w,h)效果见图
来一个简单的饼图
const canvas = document.querySelector("#can");
canvas.style.border = '1px solid red'
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);//x,y,r,起始角度,结束角度,是否顺时针;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(250,250);//注意如果不是画一个正圆,必须要moveTo圆心点;表示起始点很有点意思;
ctx.arc(250,250,100,-20*Math.PI/180,0.5*Math.PI,false);//表示角度的方式;false表示顺时针,true为逆时针
ctx.fillStyle = 'lightpink';
ctx.fill();//不可省略的;
ctx.beginPath()
ctx.moveTo(250,250);
ctx.fillStyle = 'green';
ctx.arc(250,250,100,0.5*Math.PI,230*Math.PI/180,false);
ctx.fill();
ctx.beginPath()
ctx.moveTo(250,250);
ctx.fillStyle = 'gray';
ctx.arc(250,250,100,230*Math.PI/180,1.5*Math.PI,false);
ctx.fill();
ctx.beginPath()
ctx.moveTo(250,250);
ctx.fillStyle = 'red';
ctx.arc(250,250,100,1.5*Math.PI,2*Math.PI/180,false);
ctx.fill();
//ctx.lineWidth = '0.1';//这样看起来边界不会太重;然而look at there
//ctx.stroke() ;//这样;只会对最后一个生效;
//不该划线;直接填充就可以了;
图片上面加载文字;
绘制文字;
首先要计算文字的坐标;
y=y0 + Math.sin(rad)*R;
x=x0 + Math.cos(rad)R;
R是半径;rad是角度;算好角度自动正负的值;
Math.sin(30Math.PI/180)*180;
这个东西还是要多打几个例子看看效果的呀
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d4ac5b537ced44f73b877d86635da774.jpeg)
先到这里下次再补上;