对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);
})();
})();
// ]]>
对canvas arc()中counterclockwise参数的一些误解的更多相关文章
- Canvas绘图中的路径描边与填充
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- HTML5 Canvas arc()函数//////////////////////(转)
HTML5 Canvas arc()函数 实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...
- HTML5 Canvas arc()函数
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- block使用小结、在arc中使用block、如何防止循环引用
引言 使用block已经有一段时间了,感觉自己了解的还行,但是几天前看到CocoaChina上一个关于block的小测试主题: [小测试]你真的知道blocks在Objective-C中是怎么工作的吗 ...
- RGB颜色中的参数是变量的时候,为什么要加上两个+号在左右?
<script> function draw(){ var c=document.getElementById("mycanvas"); var cxt=c.getCo ...
- ARC中__bridge, __bridge__transfer, __bridge_retained 关系
总结于 IOS Tuturial 中 ARC两章,详细在dropbox pdf 文档. Toll-Free Bridging 当你在 Objective-C 和 Core Foundation 对象之 ...
- 如何获取url中的参数并传递给iframe中的报表
在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...
- JavaScript如何获取网页url中的参数
我们可以自定义一个公共函数来实现网页url中的参数获取,返回的是一个数组 GetUrlRequest: function () { var url = decodeURI(location.searc ...
- JavaScript------获取url地址中的参数
$(document).ready(function () { //获取地址中的参数(name是字符串) function getParameter(name) { //正则表达式 var reg = ...
随机推荐
- ie,360浏览器出现无法打开网页(包括本地html)的解决方法
有一天,编写网页照例打开chrome,ie,360等浏览器,发现ie,360均无法打开本地网页,输入百度,也无法打开,从没遇到过这种情况,通过百度,找了几种方法,没解决, 后来,看到有一种原因可能是浏 ...
- hdu5730 Shell Necklace 【分治fft】
题目 简述: 有一段长度为n的贝壳,将其划分为若干段,给出划分为每种长度的方案数,问有多少种划分方案 题解 设\(f[i]\)表示长度为\(i\)时的方案数 不难得dp方程: \[f[i] = \su ...
- 刷题总结——大工程(bzoj3611)
题目: Description 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道. 我们这个国家位置非常特殊,可以看成是一个单位边权的树,城市位于顶点上. 在 2 个国家 a,b 之间建 ...
- AC日记——Housewife Wind poj 2763
Language: Default Housewife Wind Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 10525 ...
- vue 之循环添加不同class
在vue中按条件为class动态添加直接使用:class="[{ active: isActive }, errorClass]"之类的表达式就可以 但是如果我们要为一个循环列表按 ...
- k8s入门简介
1.docker的三种编排工具 Docker的第一类编排工具: a.docker compose(docker原生):只能对一个主机上的容器进行编排,无法编排多个主机上的容器; b.docker sw ...
- Uncaught TypeError: window.showModalDialog is not a function
if(window.showModalDialog == undefined){ window.showModalDialog = function(url,mixedVar,features){ w ...
- BZOJ1001[BeiJing2006]狼抓兔子最小割網絡流
Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一 ...
- SVG动画实践篇-音量变化效果
git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn 说明 这个动画的效果就是多个线 ...
- 设置linux编码utf-8
#vim /etc/sysconfig/i18n LANG="en_US.UTF-8" SYSFONT="latarcyrheb-sun16" source / ...