web前端开发

您现在的位置是:首页>前端开发

HTML5

【HTML5】Canvas的圆形与圆弧

admin:杨小二时间:2020-09-11 19:22:18前端开发0次
绘制圆弧或者圆,我们使用arc()方法

圆形与圆弧

arc()

绘制圆弧或者圆,我们使用arc()方法

arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • x:圆弧中心(圆心)的 x 轴坐标。

  • y:圆弧中心(圆心)的 y 轴坐标。

  • radius:圆弧的半径。

  • startAngle:圆弧的起始点, x轴方向开始计算,单位以弧度表示。

  • endAngle:圆弧的终点, 单位以弧度表示。

  • anticlockwise 可选:可选的Boolean值 ,如果为 true,逆时针绘制圆弧,反之,顺时针绘制。

注意:arc()函数中的角度单位是弧度,不是度数。角度与弧度的js表达式:

radians=(Math.PI/180)*degrees。

实例:canvas-demo/arc.html:

cxt.beginPath();
cxt.arc(70,70,50,0,Math.PI/2,true);
cxt.stroke();

cxt.beginPath();
cxt.arc(180,70,50,0,Math.PI/2,false);
cxt.stroke();

cxt.beginPath();
cxt.arc(300,70,50,0,Math.PI/2,true);
cxt.fill();

cxt.beginPath();
cxt.arc(400,70,50,0,Math.PI/2,false);
cxt.fill();

arcTo()

arcTo()方法用于在画布上创建介于两个切线之间的弧/曲线。

arcTo(x1, y1, x2, y2, radius)
  • x1:第一个控制点的 x 轴坐标。

  • y1:第一个控制点的 y 轴坐标。

  • x2:第二个控制点的 x 轴坐标。

  • y2:第二个控制点的 y 轴坐标。

  • radius:圆弧的半径。

实例:canvas-demo/arcTo.html:

<canvas id="canvas" width="400" height="300">
		不支持canvas
	</canvas>
	<script>
		var canvas = document.getElementById('canvas');
		var ctx = '';
        ctx = canvas.getContext('2d');
		ctx.beginPath();
		ctx.beginPath();
		ctx.moveTo(20,20);           
		ctx.lineTo(100,20);          
		ctx.arcTo(150,20,150,70,50); 
		ctx.lineTo(150,120);         
		ctx.stroke(); 
	</script>

平面设计