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 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 HTML / CSS
HTML基本元素标签介绍
Feb 28 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
综合图片计数器
2006/10/09 PHP
php分页示例代码
2007/03/19 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
巴西网上药房:onofre
2016/11/21 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
党员批评与自我批评
2014/02/12 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
5s推行计划书
2014/05/06 职场文书
影视广告专业求职信
2014/09/02 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
岗位聘任协议书
2015/09/21 职场文书