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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
使用CSS实现六边形的图片效果
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
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php GUID生成函数和类
2014/03/10 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
python uuid模块使用实例
2015/04/08 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python字典遍历操作实例小结
2019/03/05 Python
Django之腾讯云短信的实现
2020/06/12 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
最新党员思想汇报
2014/01/01 职场文书
先进个人获奖感言
2014/01/24 职场文书
产品委托授权书范本
2014/09/16 职场文书
关于感谢信的范文
2015/01/23 职场文书
英语教学课后反思
2016/02/15 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers