canvas的arc()方法详解

在做项目时画曲线时主要用的就是arc()画圆弧的方法:

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

即:

arc(圆心的x坐标,圆心的y坐标,圆的半径,起始角(以弧度计,即l圆心的3点钟位置是0度),结束角,规定应该是顺时针还是逆时针画图)

其中最后一个参数是可选的,true=逆时针,false =顺时针

例:如果是画下面这样一个圆弧的话,其实代码可以这样写:

//第一段圆弧

cvt.beginPath();

//弧度 = 角度 * Math.PI/180

cvt.arc(270,115,176,-41*Math.PI/180,20*Math.PI/180,false); //顺时针 319与-41是一样的

cvt.strokeStyle = "#ff0000";

cvt.stroke();

由于是在起始角的上面开始向下画的,-41代表的就是从起始角的上面开始画的,因为是顺时针,所以就从负的角度开始画,然后度数一直在增大直到0度,然后再增大到20度,至此,一段圆弧画完。另外还有一层意思是319与-41是一样的,因为如果把这段圆弧的起始角定为319,那顺时针向下画时角度也是在增大的,直到360度,然后再从0度再增大到20度,也是可以画出一样的圆弧的。

再举一下逆时针的例子:如下图

上图所示需要的代码为:

//第二段圆弧

cvt.beginPath();

//弧度 = 角度 * Math.PI/180

cvt.arc(639,247,216,-160*Math.PI/180,-280*Math.PI/180,true); //逆时针 -160与200是一样的

cvt.strokeStyle = "#ff0000";

cvt.stroke();

其中圆弧的起始角为-160度,而这也与200度是一样的(360+(-160)= 200),因为是逆时针,所以角度是减小的,从-160到-280就画出了上图的圆弧。反之,从200到80也可以完全画出一样的圆弧。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-23 13:49:52

canvas的arc()方法详解的相关文章

JavaScript原生对象属性和方法详解——Array对象 转载

length 设置或返回 数组中元素的数目. 注意:设置 length 属性可改变数组的大小.如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失.如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined.所以length不一定代表数组的元素个数. var arr = new Array(3) arr[0] = "John" arr[1] = "Andy" arr[2] = "Wendy" cons

Python数据类型及其方法详解

Python数据类型及其方法详解 我们在学习编程语言的时候,都会遇到数据类型,这种看着很基础也不显眼的东西,却是很重要,本文介绍了python的数据类型,并就每种数据类型的方法作出了详细的描述,可供知识回顾. 一.整型和长整型 整型:数据是不包含小数部分的数值型数据,比如我们所说的1.2.3.4.122,其type为"int" 长整型:也是一种数字型数据,但是一般数字很大,其type为"long" 在python2中区分整型和长整型,在32位的机器上,取值范围是-2

【转】深入学习JavaScript: apply call方法 详解(转)

Js apply方法详解 原文:http://blog.csdn.net/myhahaxiao/article/details/6952321 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和cal

hbase-0.94安装方法详解

先决条件: 1)java环境,需要安装java1.6以上版本 2)hadoop环境,由于HBase架构是基于其他文件存储系统的,因此在分布式模式下安装Hadoop是必须的,但是,如果运行在单价模式下,此条件可以省略.Hadoop-1.2.1的安装方法参考 hadoop-1.2.1安装方法详解 注意:安装时要注意Hadoop和HBase之间的版本关系,如果不匹配,很可能会影响HBase系统的稳定性. 本帖教程采用的hadoop是hadoop-1.2.1,hbase采用的是hbase-0.94 hb

oc中字典的实现方法详解

一:字典的基本概念 Foundation中的字典(NSDictionary,NSMutableDictionary)是由键-值对组成的数据集合.正如,我们在字典里查找单词的定义一样. 通过key(键),查找的对应的value(值),key通常是字符串对象,也可以是其他任意类型对象.在一个字典对象中,key的值必须是唯一的. 此外,字典对象的键和值不可以为空(nil),如果需要在字典中加入一个空值,可以加入NSNull对象 二:不可变字典-NSDictionary 1:初始化(以一个元素和多个元素

57. 数对之差的最大值:4种方法详解与总结[maximum difference of array]

[本文链接] http://www.cnblogs.com/hellogiser/p/maximum-difference-of-array.html [题目] 在数组中,数字减去它右边的数字得到一个数对之差.求所有数对之差的最大值.例如在数组{2, 4, 1, 16, 7, 5, 11, 9}中,数对之差的最大值是11,是16减去5的结果. [分析] 看到这个题目,很多人的第一反应是找到这个数组的最大值和最小值,然后觉得最大值减去最小值就是最终的结果.这种思路忽略了题目中很重要的一点:数对之差

Java中的main()方法详解

在Java中,main()方法是Java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main()方法,这个方法和其他的方法有很大的不同,比如方法的名字必须是main,方法必须是public static void 类型的,方法必须接收一个字符串数组的参数等等. 在看Java中的main()方法之前,先看一个最简单的Java应用程序HelloWorld,我将通过这个例子说明Java类中main()方法的奥秘,程序的代码如下: 1 /** 2 * Java中的main()方法

查看登陆系统用户的信息的三种方法详解

查看登陆系统用户的信息的三种方法详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.who这个命令显示可以谁在登陆,但是这个有很多的花式玩法,这个命令超简单 语法:who [OPTION]... [ FILE | ARG1 ARG2 ] 1.参数:-u,显示闲置时间,若该用户在前一分钟之内有进行任何动作,将标示成"."号,如果该用户已超过24小时没有任何动作,则标示出"old"字符串. 例如: 2.参数:-m,此参数的效果和指定"a

HTTP请求方法详解

HTTP请求方法详解 请求方法:指定了客户端想对指定的资源/服务器作何种操作 下面我们介绍HTTP/1.1中可用的请求方法: [GET:获取资源]     GET方法用来请求已被URI识别的资源.指定的资源经服务器端解析后返回响应内容(也就是说,如果请求的资源是文本,那就保持原样返回:如果是CGI[通用网关接口]那样的程序,则返回经过执行后的输出结果).     最常用于向服务器查询某些信息.必要时,可以将查询字符串参数追加到URL末尾,以便将信息发送给服务器.     使用GET请求时经常会发