canvas基础知识（二）画矩形、饼

补充：

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；
这个东西还是要多打几个例子看看效果的呀

先到这里下次再补上；