疯狂讲义随笔——canvas之arc()使用详解
来源:互联网 发布:平面设计软件分类 编辑:程序博客网 时间:2024/06/12 18:59
canvas画弧线的方法一共有四个,分别是arc(),arcTo(),quadraticCurveTo(),bezierCurveTo()
arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。
arc的语法如下:
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
方法参数对应的语义如下
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
前五个参数很简单,这里不再表述,关于第六个参数anticlockwise(是否为逆时针)。
默认值为false,即为顺时针;为true时,为顺时针。
备注:顺时还是逆时针对的是弧线的渲染方向
番外:在js中获取canvas元素的CanvasRenderingContext2D对象后,调用该对象的rect();方法可以构建一个矩形,然后调用fill()或stroke()方法实现颜色的填充或描边。
arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。
arc的语法如下:
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
方法参数对应的语义如下
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
前五个参数很简单,这里不再表述,关于第六个参数anticlockwise(是否为逆时针)。
默认值为false,即为顺时针;为true时,为顺时针。
<canvas id="cc" height="200" width="400"></canvas><script>var canvas=document.getElementById("cc").getContext("2d");canvas.shadowColor="gray";canvas.shadowBlur=6;canvas.shadowOffsetX=5;canvas.shadowOffsetY=3;canvas.lineWidth=5;canvas.beginPath();canvas.lineStyle="red";canvas.arc(200,100,50,0,Math.PI/10);canvas.stroke();</script>
备注:顺时还是逆时针对的是弧线的渲染方向
番外:在js中获取canvas元素的CanvasRenderingContext2D对象后,调用该对象的rect();方法可以构建一个矩形,然后调用fill()或stroke()方法实现颜色的填充或描边。
var canvas=document.getElementById("cc").getContext("2d");canvas.rect(140,30,70,40);//canvas.fill();canvas.stroke();
阅读全文
0 0
- 疯狂讲义随笔——canvas之arc()使用详解
- 疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵
- 疯狂讲义随笔——坐标变换模拟雪花飘落
- 《疯狂JAVA讲义》之二——关于main方法
- 《疯狂JAVA讲义》之三——环境配置
- 《疯狂JAVA讲义》之七——java源文件综述
- 《疯狂JAVA讲义》之九——Java数据类型分类
- 《疯狂JAVA讲义》之十三——流程控制
- iOS疯狂讲义之--应用程序版本新特性设置详解
- 疯狂java讲义笔记——数据类型
- 《疯狂JAVA讲义》——二维数组
- 《疯狂JAVA讲义》——多态
- 《疯狂JAVA讲义》——Singleton类
- 《疯狂Java讲义》——控制线程
- 《疯狂Java讲义》——数据类型
- 《疯狂Java讲义》——多线程学习
- 算术运算符—[疯狂java讲义]
- 赋值运算符—[疯狂java讲义]
- Python-文件操作
- 全面理解面向对象的 JavaScript
- 《0day安全学习笔记》——ChapterII——变量覆盖详解
- Java排序算法-冒泡排序
- PLSQL的中文乱码显示全是问号
- 疯狂讲义随笔——canvas之arc()使用详解
- [FAQ15598][Common]C2K双卡项目通话界面输入“*#06#”显示MEID/IMEI的客制化
- maven 中央仓库 无法访问
- centos6.6搭建dns服务器
- 69道Spring面试题和答案
- 课堂练习三
- MySQL删除没有主键的表中的重复记录,只保留一条记录
- 点击按钮发送短信方法,这里只介绍一种(TP框架)
- 全网友遇到的Mac安装Scrapy框架所有问题