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 解析url的search方法
复制代码 代码如下: function searchParse(){ var resultObj = {}; var search = window.location.search; if(search && search.length > 1){ var search = search.substring(1); var items = search.split('&'); for(var index = 0 ; index < items.length ; inde
-
javascript flash下fromCharCode和charCodeAt方法使用说明
fromCharCode 方法 从一些 Unicode 字符值中返回一个字符串. String.fromCharCode([code1[, code2[, ...[, codeN]]]]) 参数 String 必选项.为 String 对象. code1, . . . , codeN 可选项.是要转换为字符串的 Unicode 字符值序列.如果没有给出参数,结果为空字符串. 说明 在调用 fromCharCode 前不必创建 String 对象. 在下面的例子中,test 包含字符串 "plai
-
javascript中的window.location.search方法简介
window.location.search方法是截取当前url中"?"后面的字符串, 例如:index.php?act=doctor,截取后的字符串就是act=doctor
-
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
JavaScript charCodeAt 方法 charCodeAt 方法用于从字符串中取得指定位置字符的 Unicode 编码.其语法如下: 复制代码 代码如下: str_object.charCodeAt( x ) 参数说明: 参数 说明 str_object 要操作的字符串(对象) x 必需.表示位置的数字 提示:字符串是从 0 开始计数的. charCodeAt 方法实例 复制代码 代码如下: <script language="JavaScript"> docu
-
JavaScript Archive Network 集合
Widget.Tooltip-0.02 Asynapse-0.10_01 Widget.Lightbox-0.09 Archive.Tar-0.03 Form.Element.Resize-0.03 Data.Dump-0.02 Widget.Timer-0.40 Asynapse.Emoticon-0.01 String.Buffer-0.0.1 HTTP.Cookies-1.11 Widget.Chmod-0.3 Number.Format-0.03 Effect.DropShadow-0.
-
javascript使用location.search的示例
复制代码 代码如下: function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split
-
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
JavaScript fromCharCode 方法 fromCharCode 方法用于把一个或多个 Unicode 值转换为(大写)字符串,并返回该字符串.其语法如下: 复制代码 代码如下: String.fromCharCode( num1, num2, ... ) 参数说明: 参数 说明 num1/num2 必需.Unicode 编码值 提示:该方法是 String 的静态方法,它的语法应该是 String.fromCharCode(),而不适用于您自己创建的 String 对象. fro
-
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,下面通过实例来讲解s
-
详解opencv中画圆circle函数和椭圆ellipse函数
1. void ellipse(InputOutputArray img, Point center, Size axes, double angle, double startAngle, double endAngle, const Scalar& color, int thickness = 1, int lineType = LINE_8, int shift = 0); ellipse函数将椭圆画到图像 lmg 上, 椭圆中心为点center,并且大小位于矩形 axes
-
JavaScript获取网页中第一个图片id的方法
本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"
-
JavaScript返回网页中超链接数量的方法
本文实例讲述了JavaScript返回网页中超链接数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 <!DOCTYPE html> <html> <body> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap
-
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200
-
JavaScript返回网页中锚点数目的方法
本文实例讲述了JavaScript返回网页中锚点数目的方法.分享给大家供大家参考.具体如下: JavaScript返回网页中锚点的数目,下面的JS代码获取页面中的anchor数量 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a>
-
JavaScript获取网页中第一个链接ID的方法
本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="
-
python使用正则表达式分析网页中的图片并进行替换的方法
本文实例讲述了python使用正则表达式分析网页中的图片并进行替换的方法.分享给大家供大家参考.具体分析如下: 这段代码分析网页中的所有图片表单<img>,分析后为其前后添加相应的修饰标签,并添加到图片的超级链接. 复制代码 代码如下: result = value.replace("[ page ]","").replace(' ',u' ') p=re.compile(r'''(<img\b[^<>]*?\bsrc[\s\t\r\
-
网页中的图片查看器viewjs使用方法
需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明. 下面做2个简单的示例: 1.示例一:单一图片 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"
-
python中根据字符串调用函数的实现方法
在python中可以根据字符串来调用函数: 1.使用getattr从字符串来调用函数 在多进程中,可能传递过来的是一个字符串,那么我怎么来调用一个已经存在的函数呢,主要就是使用到getattr函数的作用,这个函数就是在使用字符串得到这个字符串对应的函数的对象,然后就可以进行执行,如下所示: 在模块中,存在两个函数: [root@python 530]# cat attr.py #!/usr/bin/env python def kel(): print 'this is a kel functi
随机推荐
- js工具方法弹出蒙版
- Linux下模拟http的get/post请求(curl or wget)详解
- 详解Obejective-C中将JSON数据转为模型的方法
- 更靠谱的H5横竖屏检测方法(js代码)
- ThinkPHP CURD方法之where方法详解
- 在Python的Django框架中显示对象子集的方法
- phpmyadmin出现#2003服务器无响应解决方法小结
- PHP生成指定长度随机数最简洁的方法
- 微信公众号开发 实现点击返回按钮就返回到聊天界面
- 可读可执行的C语言简历源文件
- jquery keypress,keyup,onpropertychange键盘事件
- js中parseInt函数浅谈
- 微信小程序 网络API 上传、下载详解
- centos7 无线网卡驱动的安装及无线网络的配置详解
- c# Winform 程序自动更新实现方法
- C# IDE VS2005中的Hosting Process (vshost.exe)作用介绍
- 详解Python中如何写控制台进度条的整理
- Vue动画事件详解及过渡动画实例
- Vue开发之watch监听数组、对象、变量操作分析
- SpringBoot整合freemarker的讲解