canvas实现圆绘制的示例代码


Posted in HTML / CSS onSeptember 11, 2019

arc

语法:arc(x, y, radius, startAngle, endAngle, anticlockwise)

前面两个参数是x坐标,y坐标,第三个参数是半径,第四个参数是开始的弧度,第五个参数是结束的弧度,第六个参数是顺时针还是逆时针,默认是顺时针。

看下面代码,这样就能绘制一个圆了。

ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.stroke()

效果图:

canvas实现圆绘制的示例代码

这里要说明的一点是,不管顺时针还是逆时针,圆的弧度的位置是不变的,不会因为顺势转或者逆时针而改变,0.5pi的位置

canvas实现圆绘制的示例代码

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI)
ctx.stroke()

canvas实现圆绘制的示例代码

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI,true)
ctx.stroke()

canvas实现圆绘制的示例代码

上面代码第一个是顺时针绘制的,3/4 个弧度,用逆时针的话就是 1/4 个弧度,它的意思是从 0 开始,顺时针到 1.5pi的位置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 #HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 #HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 #HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 #HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 #HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 #HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 #HTML / CSS
You might like
PHP实现过滤各种HTML标签
2015/05/17 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
python通过post提交数据的方法
2015/05/06 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python获取当前路径实现代码
2017/05/08 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
中间件的定义
2016/08/09 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
装修五一活动策划案
2014/01/23 职场文书
实习老师离校感言
2014/02/03 职场文书
房产公证书范本
2014/04/10 职场文书
小摄影师教学反思
2014/04/27 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
公司离职证明范本
2014/10/17 职场文书
邀请函模板
2015/02/02 职场文书
班主任寄语2015
2015/02/26 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫
JavaScript设计模式之原型模式详情
2022/06/21 Javascript