详解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的代码我没有写)
1
2
3
4
5
|
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,这样如下图
1
2
3
4
5
|
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,选择顺时针时
1
2
3
4
5
|
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,选择逆时针时
1
2
3
4
5
|
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
欢迎分享本文,转载请注明本文出处和地址
详解JavaScript中的arc的方法的更多相关文章
- 【转】详解JavaScript中的this
ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 详解Webwork中Action 调用的方法
详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- 详解JavaScript中的原型
前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...
- 详解javascript中this的工作原理
在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向. 一.指向 window: 在全局中使用 this,它将会指向全 ...
- 【转】详解JavaScript中的异常处理方法
有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...
- sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序
转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道 ...
随机推荐
- Java中的阻塞队列-LinkedBlockingQueue(二)
原文地址:http://benjaminwhx.com/2018/05/11/%E3%80%90%E7%BB%86%E8%B0%88Java%E5%B9%B6%E5%8F%91%E3%80%91%E8 ...
- vueHistory 模式下,布置到服务器上路由刷新会报nginx404错误
之前写完vue项目后,布置到服务器,用nginx反向代理后,一开始进去,进各种路由都是没问题的,但是一旦f5刷新后就会出现一个nginx404的错误. 经过翻阅vue文档后,发现这是vueHistor ...
- 常规项目用到的jar包之maven的pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- mysql测试和sysbench工具详解
前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...
- Android - 看似内存泄漏,实则不是,记一次内存泄漏的案例分析
APP中常常会存在内存泄漏的问题,一个简单的测试方法是,多次进入和退出同一页面(Activity),使用adb shell中的dumpsys meminfo com.android.settings ...
- python 不同目录间的模块调用
有时候调用的模块不再同一个目录.直接import 是加载不进来的.默认的加载路径是sys.path中指定的路径.如果要指定加载的目录得需要把这个目录加到sys.path里面. 比如要加载父目录的同级目 ...
- Eclipse Push出现rejected - non-fast-forward错误
在 Push到服务器时有时会出现 rejected - non-fast-forward 错误,这是由于pull的代码而远端发生改变,此时再提交之前你需要将远端的改变合并到本地上 参考:https:/ ...
- 来自SaberSama的HTML总结
html 为什么要转过来呢? 因为我觉到,同样是一个初学者,应该互相学习,交流. html:是Hyper Text Markup Language的简写,即超文本标记语言. 网页的组成成分为HTML- ...
- Verilog八线 - 三线优先编码器设计(74LS148)
百度百科_74LS148 if语句法 //8线-3线优先编码器设计(74LS148) // //EI | A7 A6 A5 A4 A3 A2 A1 A0 | Y2 Y1 Y0 GS EO //0 | ...
- Oracle编程入门经典 第12章 事务处理和并发控制
目录 12.1 什么是事务处理... 1 12.2 事务处理控制语句... 1 12.2.1 COMMIT处理... 2 12.2.2 RO ...