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 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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
239军机修复记
2021/03/02 无线电
Laravel中Trait的用法实例详解
2016/03/16 PHP
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
python实现统计代码行数的方法
2015/05/22 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python操作excel的方法
2018/08/16 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
小学三年级学生评语
2014/04/22 职场文书
小学生操行评语大全
2014/04/22 职场文书
个人创业事迹材料
2014/12/30 职场文书
货款欠条范本
2015/07/03 职场文书
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技