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实现背景渐变的方法
Jul 14 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
python实现的重启关机程序实例
2014/08/21 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
django实现用户登陆功能详解
2017/12/11 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python使用folium excel绘制point
2019/01/03 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python logging设置level失败的解决方法
2020/02/19 Python
python 常见的排序算法实现汇总
2020/08/21 Python
三好学生自我鉴定
2013/12/17 职场文书
工作保证书范文
2014/04/29 职场文书
政府法律服务方案
2014/06/14 职场文书
安全口号大全
2014/06/21 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB