对canvas arc()中counterclockwise参数的一些误解
一直没有很细心地去研究CanvasRenderingContext2D对象的arc方法,对它的认识比较模糊,导致犯了一些错误,特发此文,以纠正之前的错误理解。
arc()方法定义如下:
arc() 方法使用一个中心点和半径,为一个画布的当前子路径添加一条弧。
语法:
arc(x, y, radius, startAngle, endAngle, counterclockwise)
参数 | 描述 |
---|---|
x, y | 描述弧的圆形的圆心的坐标。 |
radius | 描述弧的圆形的半径。 |
startAngle, endAngle |
沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。 沿着 X 轴正半轴的三点钟方向的角度为 0。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。false = 顺时针,true = 逆时针。 |
首先要明确startAngle这个参数,规范定义的是 “沿着 X 轴正半轴的三点钟方向的角度为 0”,如下图:
这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这个方法会在当前点和当前子路径的起始点之间添加一条直线。接下来,它沿着圆周,在子路径的起始点和结束点之间添加弧(方向从起点开始,向终点画弧)。
最后一个 counterclockwise 参数指定了圆应该沿着哪个方向遍历来连接起始点和结束点。这个方法将当前位置设置为弧的终点。
首先来看顺时针的情况:
ctx.beginPath();
ctx.arc(100,75,50,0,Math.PI / 2,false);
ctx.stroke();
逆时针:
ctx.beginPath();
ctx.arc(100,75,50,0,Math.PI / 2,true);
ctx.stroke();
两种情况都是由起点朝终点画弧线,但以顺时针和逆时针区分,于是就有了两种不同的图形。
最后以实例来说明这一过程:
逆时针(true)
// 360) {
i = 0;
ctx.clearRect(0,0,c.width,c.height);
}
ctx.clearRect(0,0,c.width,c.height);
var angle = startAngle + i * arc;
ctx.lineWidth = 10;
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.arc(centerX, centerY, outsideRadius, 0, -angle - arc, true);
//ctx.closePath();
ctx.stroke();
i++;
requestAnimationFrame(draw,c);
})();
})();
// ]]>
顺时针(false)
// 360) {
j = 0;
ctx1.clearRect(0,0,c1.width,c1.height);
}
ctx1.clearRect(0,0,c1.width,c1.height);
var angle = startAngle + j * arc;
ctx1.lineWidth = 10;
ctx1.strokeStyle = 'red';
ctx1.beginPath();
ctx1.arc(centerX, centerY, outsideRadius, 0, angle + arc, false);
//ctx.closePath();
ctx1.stroke();
j++;
requestAnimationFrame(draw,c1);
})();
})();
// ]]>
最新文章
- iOS6_自动约束 Constraints
- NetBIOS与Winsock编程接口
- 用PHP访问数据库
- AC日记——无线网络发射器选址 洛谷 P2038
- Android-Universal-Image-Loader开源项目的简要说明及使用实例
- AIX 第7章 指令记录
- JS的第一节课
- Tips: compilation and creating new projects on Android 4.0
- jQuery 滚动动画简单版
- javascript学习代码
- CSS的一些思考(一)
- 【RabbitMQ系列】队列、绑定、交换器
- MongoDB 关系
- Spring Aop源码分析
- promise的理解
- spring事务解析
- 洛谷 p1123 取数游戏【dfs】
- linux下文件内容查找 转
- 模拟赛 sutoringu
- BZOJ 3172 [Tjoi2013]单词 AC自己主动机(fail树)