一直没有很细心地去研究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参数的一些误解的更多相关文章

  1. Canvas绘图中的路径描边与填充

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  2. HTML5 Canvas arc()函数//////////////////////(转)

    HTML5 Canvas arc()函数   实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.get ...

  3. HTML5 Canvas arc()函数

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  4. block使用小结、在arc中使用block、如何防止循环引用

    引言 使用block已经有一段时间了,感觉自己了解的还行,但是几天前看到CocoaChina上一个关于block的小测试主题: [小测试]你真的知道blocks在Objective-C中是怎么工作的吗 ...

  5. RGB颜色中的参数是变量的时候,为什么要加上两个+号在左右?

    <script> function draw(){ var c=document.getElementById("mycanvas"); var cxt=c.getCo ...

  6. ARC中__bridge, __bridge__transfer, __bridge_retained 关系

    总结于 IOS Tuturial 中 ARC两章,详细在dropbox pdf 文档. Toll-Free Bridging 当你在 Objective-C 和 Core Foundation 对象之 ...

  7. 如何获取url中的参数并传递给iframe中的报表

    在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...

  8. JavaScript如何获取网页url中的参数

    我们可以自定义一个公共函数来实现网页url中的参数获取,返回的是一个数组 GetUrlRequest: function () { var url = decodeURI(location.searc ...

  9. JavaScript------获取url地址中的参数

    $(document).ready(function () { //获取地址中的参数(name是字符串) function getParameter(name) { //正则表达式 var reg = ...

随机推荐

  1. BZOJ1189 [HNOI2007]紧急疏散evacuate 【二分 + 网络流】

    题目 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是一扇门,人们可以从 ...

  2. lucas定理 +证明 学习笔记

    lucas定理 p为素数 \[\dbinom n m\equiv\dbinom {n\%p} {m\%p} \dbinom {n/p}{m/p}(mod p)\] 左边一项直接求,右边可递归处理,不包 ...

  3. 滑雪与时间胶囊(bzoj 2753)

    Description a180285非常喜欢滑雪.他来到一座雪山,这里分布着M条供滑行的轨道和N个轨道之间的交点(同时也是景点),而且每个景点都有一编号i(1<=i<=N)和一高度Hi. ...

  4. 利用jenkins和hockey组织iOS持续交付过程

    1. jenkins可以单独作为web应用部署和启动,但建议将其部署在tomcat上,可以方便的管理其他一些web应用,下面讲解如何在Mac设备上安装tomcat 到tomcat官网下载适用于Mac设 ...

  5. LeetCode OJ——Pascal's Triangle II

    http://oj.leetcode.com/problems/pascals-triangle-ii/ 杨辉三角2,比杨辉三角要求的空间上限制Could you optimize your algo ...

  6. Delphi将图片缩放成指定大小

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  7. PHP将emoji表情进行过滤

    emoji表情是个麻烦的东西,不仅储存的时候需要处理,而且在PC的显示上需要三方的类库来处理.并且它还是经常更新.... 最近开发新项目的时候明确要求某个字段要过滤emoji表情,在网上找了个方法,亲 ...

  8. SpringMVC (<context:include-filter>和<context:exclude-filter>的使用)

    eg: 1.现在给定一个项目包的结构: com.yk.controller com.yk.service 2.在SpringMVC.XML有以下的配置: <!--扫描@controller注解- ...

  9. Springboot的Bean的Scope

    这周在项目中遇到这样一个Bug,代码大致是这样的,有一个LogEntity日志类,里面有一个InnerLog负责存储每次请求的RPCInfo相关信息, 每次请求的时候会把RPC相关信息加入到Inner ...

  10. Maven创建Java Application工程(既jar包)

    Maven在创建工程时使用的是archetype(原型)插件,而如果要创建具体的工程,比如Application这些,那么可以使用maven-archetype-quickstart(相当于一个子类型 ...