canvas 画图----arc函数

Posted 2022-06-22 michael_yqs

arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是（圆心X坐标，圆心Y坐标，半径，开始角度（弧度），结束角度弧度，是否按照顺时针画）； 这个主要是用来画弧形的，有一些地方需要注意，调用arc的时候，canvas的宽和高必须写成width和height属性，否则画出的弧形会出现意想不到的问题： 下面第一个图是将canvas的宽度和高度写在外部样式和行内style样式的效果
  <canvas id="arc"></canvas>//此时width属性和height属性没有赋值，宽高是写在样式表里的。  //<canvas id="arc"  width="500" height="600" ></canvas>
然后将canvas声明换成第二种：<canvas id="arc"  width="500" height="600" ></canvas> ok，正常了
画弧的js:

var canvas=document.getElementById("arc"),
    context=canvas.getContext("2d");
   context.beginPath();
   context.fillStyle = "red";
   context.strokeStyle="blue";
   context.arc(100,100,100,0,Math.PI*2,false);
   //context.fill();//实心填充
   context.stroke();//空心描绘
   context.closePath();

ps：arcTo(x1,x2,y1,y2,r0):这个函数的作用是定向画弧，原理是，用起点，(x1,y1),(x2,y2)组成的两条线作为目标圆的切线，(x1,y1),(x2,y2)作为切点，r0作为公切圆半径