JavaScript在网页中画圆的函数arc使用方法


Posted in Javascript onNovember 13, 2015

一、arc所需要的参数设置

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

JavaScript在网页中画圆的函数arc使用方法

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

二、arc参数详解

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

JavaScript在网页中画圆的函数arc使用方法

    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,这样如下图

JavaScript在网页中画圆的函数arc使用方法

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,这样如下图

  JavaScript在网页中画圆的函数arc使用方法

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

    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();

JavaScript在网页中画圆的函数arc使用方法

当我将起点设置为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在网页中画圆的函数arc使用方法,希望大家喜欢。

Javascript 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 Javascript
微信小程序后端实现授权登录
Feb 24 Javascript
学习JavaScript正则表达式
Nov 13 #Javascript
jquery实现九宫格大转盘抽奖
Nov 13 #Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 #Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 #Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 #Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 #Javascript
有关Promises异步问题详解
Nov 13 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
PHP代码优化的53个细节
2014/03/03 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
详解react组件通讯方式(多种)
2020/05/06 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
用python对excel查重
2020/12/07 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
销售团队口号大全
2014/06/06 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书