详解JavaScript中的arc的方法

今天说说JavaScript在网页中画圆的函数arc！

一、arc所需要的参数设置

1	`arc(x, y, radius, startAngle, endAngle, counterclockwise);`

其中x,y,radius都很容易理解，那么重点说说startAngle,endAngle和counterclockwise三个参数！

二、arc参数详解

1，startAngle和endAngle分别指圆开始的角度和结束的角度，手册上面说的是开始的角度为0，结束的角度为Math.PI*2，这样正好画一个圆

2，下面通过实例来讲解startAngle和endAngle（注意html的代码我没有写）

var c = document.getElementById(‘myCanvas‘);

var cxt = c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.arc(70, 30, 25, 0, 1, false);

cxt.stroke();

我将开始角度设为0，结束角度设为1，这样如下图

var c = document.getElementById(‘myCanvas‘);

var cxt = c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.arc(70, 30, 25, 0, 1, false);

cxt.stroke();

我将开始角度设为1，结束角度设为2，这样如下图

上面我们可以看出第一张图的终点就是第二张图的起点，也就是说一个圆有无数个角度，只要你设置了开始角度和结束角度，它就可以以圆弧的形状将两点连起来！而起点和终点的差值就是图上两点的长度！当起点和终点的差值可以是两点重合时，就形成了圆！知道这一点我们就可以制作动态圆

3，counterclockwise是指是逆时针(true)还是顺时针(false)

大家看，当我将起点设置为0，终点为1，选择顺时针时

var c = document.getElementById(‘myCanvas‘);

var cxt = c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.arc(70, 30, 25, 0, 1, false);

cxt.stroke();

当我将起点设置为0，终点为1，选择逆时针时

var c = document.getElementById(‘myCanvas‘);

var cxt = c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.arc(70, 30, 25, 0, 1, true);

cxt.stroke();

想要每天及时获取王业楼的个人博客更新的内容吗？赶快添加微信公众号“ly89cn”，或者扫描下方的二维码吧！

本文来源于王业楼的个人博客，本文地址：http://www.ly89.cn/detailB/61.html

欢迎分享本文，转载请注明本文出处和地址

时间： 2024-12-21 13:19:22

详解JavaScript中的arc的方法的相关文章

详解javascript中的this对象

详解javascript中的this对象前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性.特别是对于接触静态语言比较久了的同志来说更是如此. 示例说明我们先来看一个最简单的示例: <script type=&q

详解Webwork中Action 调用的方法

详解Webwork中Action 调用的方法从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultActionProxyFactory.DefaultActionProxy.DefaultActionInvocation 终于要开始 webwork 核心业务类的总结,webwork 通过对客户端传递的 web 参数重新包装,进行执行业务 Action 类,并反馈执行结果,本篇源码分析对应下图 WebWork

【转】详解JavaScript中的异常处理方法

有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: <script type="text/javascript">  </script> 当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响,

详解 JavaScript 中 splice() 方法

splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() 方法,是一个很强的数组方法,它有多种用法. splice() 方法主要用来向数组中添加新的值. 1.删除(需要2个参数,第一个参数为"起始位",第二个参数表示删除多少个) 1 //创建数组 2 var array = []; 3 //添加值 4 array.push(1); 5 array

sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序

转载: 查看原文在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道题,当时做题的时候考虑到时间,没有去仔细研究,回来后再读了一些方法,就知道真正的考点在哪里了. 我们现在有一组"学生"对象,包含"名字,年龄"等属性,现在要求一个算法,把这些对象放在一个数组里,可以实现按照年龄对这些对象进行排序. var sdts = [ { name

详解JavaScript中的replace（）函数

Javascript中字符串对象有一个方法replace(),它的作用非常强大.这里把它的用法整理一下. 一.方法简介该方法的签名是:replace([RegExp|String],[String|Function]). 该方法返回一个新的字符串,但并不改变字符串本身. 该方法接收2个参数,第一个参数可以是字符串,也可以是一个正则表达式:第二个参数可以是一个字符串,也可以是一个函数.其中第2个参数如果是函数,那么用起来是十分强大而且灵活的,不过相对来说也比较难掌握.下面就其用法进行详细说明

详解JavaScript中的Url编码/解码，表单提交中网址编码

本文主要针对URI编解码的相关问题做了介绍,对Url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript 中和编解码相关的几对函数escape / unescape,encodeURI / decodeURI和 encodeURIComponent / decodeURIComponent. 预备知识 foo://example.com:8042/over/there?name=ferret#nose \_/ \______________/ \_______

详解JavaScript中的this

JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不用this. 其实如果完全掌握了this的工作原理,自然就不会走进这些坑.来看下以下这些情况中的this分别会指向什么: 1.全局代码中的this alert(this)//window 全局范围内的this将会指向全局对象,在浏览器中即使window. 2.作为单纯的函数调用 function f

详解Paint中的各种set方法

我们用set方法来设置画笔的样式,类似于我们挑选画笔画画的过程. set(Paint src) 顾名思义为当前画笔设置一个画笔,说白了就是把另一个画笔的属性设置Copy给我们的画笔,不累赘了 setAlpha(int a); 设置绘制图形的透明度,设置范围是[0..255] setAntiAlias(boolean aa) 打开抗锯齿.抗锯齿是依赖于算法的,算法决定抗锯齿的效率,在我们绘制棱角分明的图像时,比如一个矩形.一张位图,我们不需要打开抗锯齿. setARGB(int a, int r,