JavaScript在网页中画圆的函数arc使用方法
更新时间：2015年11月13日 14:21:20 作者：王业楼
这篇文章主要介绍了JavaScript在网页中画圆的函数arc使用方法的相关资料,需要的朋友可以参考下
一、arc所需要的参数设置
复制代码 代码如下:
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();
以上内容是小编给大家介绍的JavaScript在网页中画圆的函数arc使用方法，希望大家喜欢。
相关文章
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
这篇文章主要介绍了JavaScript弹出新窗口并控制窗口移动到指定位置的方法,涉及javascript针对弹出窗口的操作技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
javascript对于变量的定义、类型的要求都比较松散，这样既方便，但又容易犯错。有时候进行必要的类型检查是必须的。2010-12-12
这篇文章主要为大家详细介绍了Jquery+javascript实现支付网页数字键盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了JavaScript实现身法证验证代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
百度个人云盘空间大，完全免费，而且提供了pcs api供调用操作文件，在平时的项目里往里面保存一些文件是很实用的。通过本文给大家介绍使用pcs api往免费的百度网盘上传下载文件的方法，感兴趣的朋友一起学习吧2016-03-03
这篇文章主要介绍了js给onclick赋值传参数的两种方法，有需要的朋友可以参考一下2013-11-11
这篇文章主要介绍了从零使用TypeScript开发项目打包发布到npm，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
以下几种，是javascript中最常用的创建对象的方式。初学者看到后，可能会晕掉，甚至会觉得担心。其实完全不用担心，这些种方式，只需要掌握一两种，对其他的几种只需要理解就好了2013-11-11
本例是应用别人的例子，原来那位老兄是用一般方法写成的无限级折叠菜单，通过了一些简化修改，将原来的例子改成了面向对象的方式2013-07-07
这篇文章主要介绍了JS实现光滑展开合拢的菜单效果代码,涉及JavaScript响应鼠标事件遍历并改变页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论