对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 = ...
随机推荐
- BZOJ1189 [HNOI2007]紧急疏散evacuate 【二分 + 网络流】
题目 发生了火警,所有人员需要紧急疏散!假设每个房间是一个N M的矩形区域.每个格子如果是'.',那么表示这是一 块空地:如果是'X',那么表示这是一面墙,如果是'D',那么表示这是一扇门,人们可以从 ...
- lucas定理 +证明 学习笔记
lucas定理 p为素数 \[\dbinom n m\equiv\dbinom {n\%p} {m\%p} \dbinom {n/p}{m/p}(mod p)\] 左边一项直接求,右边可递归处理,不包 ...
- 滑雪与时间胶囊(bzoj 2753)
Description a180285非常喜欢滑雪.他来到一座雪山,这里分布着M条供滑行的轨道和N个轨道之间的交点(同时也是景点),而且每个景点都有一编号i(1<=i<=N)和一高度Hi. ...
- 利用jenkins和hockey组织iOS持续交付过程
1. jenkins可以单独作为web应用部署和启动,但建议将其部署在tomcat上,可以方便的管理其他一些web应用,下面讲解如何在Mac设备上安装tomcat 到tomcat官网下载适用于Mac设 ...
- LeetCode OJ——Pascal's Triangle II
http://oj.leetcode.com/problems/pascals-triangle-ii/ 杨辉三角2,比杨辉三角要求的空间上限制Could you optimize your algo ...
- Delphi将图片缩放成指定大小
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
- PHP将emoji表情进行过滤
emoji表情是个麻烦的东西,不仅储存的时候需要处理,而且在PC的显示上需要三方的类库来处理.并且它还是经常更新.... 最近开发新项目的时候明确要求某个字段要过滤emoji表情,在网上找了个方法,亲 ...
- SpringMVC (<context:include-filter>和<context:exclude-filter>的使用)
eg: 1.现在给定一个项目包的结构: com.yk.controller com.yk.service 2.在SpringMVC.XML有以下的配置: <!--扫描@controller注解- ...
- Springboot的Bean的Scope
这周在项目中遇到这样一个Bug,代码大致是这样的,有一个LogEntity日志类,里面有一个InnerLog负责存储每次请求的RPCInfo相关信息, 每次请求的时候会把RPC相关信息加入到Inner ...
- Maven创建Java Application工程(既jar包)
Maven在创建工程时使用的是archetype(原型)插件,而如果要创建具体的工程,比如Application这些,那么可以使用maven-archetype-quickstart(相当于一个子类型 ...