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 相关文章推荐
为指定元素增加样式的js代码
Dec 09 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
node.js命令行教程图文详解
May 27 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 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中运用http调用的GET和POST方法示例
2014/09/29 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
Python中给List添加元素的4种方法分享
2014/11/28 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python增加图像对比度的方法
2019/07/12 Python
python输出决策树图形的例子
2019/08/09 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
工商管理专业应届生求职信
2013/11/04 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
单位成立周年感言
2014/01/26 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
模范教师材料大全
2014/12/16 职场文书
安全员岗位职责
2015/02/10 职场文书
入队仪式主持词
2015/07/04 职场文书
致运动员加油稿
2015/07/21 职场文书