html5的canvas方法使用指南


Posted in HTML / CSS onDecember 15, 2014

canvas的方法

     save()保存当前环境的状态

     restore() 返回之前保存过的路径状态和属性

     createEvent()

     getContext()返回一个对象,指出访问绘图功能必要的API

     toDataUPL() 返回canvas图像的URL

线条样式的属性和方法

     属性:

     lineCap设置或返回线条的结束端点样式

     lineJoin设置或返回两条线相交时,所创建的拐角类型

     lineWidth设置或返回当前线条的宽度.

     miterLimit设置或返回最大斜接长度

颜色,样式和阴影属性和方法

     属性

     fillStyle设置或返回用于填充绘画的颜色,渐变或模式

     strokeStyle设置或返回用于笔触的颜色,渐变或模式

     shadowColor设置或返回用于阴影的颜色

     shadowBlur设置或返回用于阴影的模糊级别

     shadowOffsetX设置或返回阴影距形状的水平距离

     shadowOffsetY设置或返回阴影距形状的垂直距离

方法

     createLinearGradient()创建线性渐变(用在画布内容上)

     createPattern()在指定的方向上重复指定的元素

     createRadialGradient()创建放射状/环形的渐变(用在画布内容上)

     addColorStop()规定渐变对象中的颜色或停止位置

路径方法

         fill()填充当前绘图(路径)

         stroke()绘制已定义的路径

beginPath()起始一条路径,或重置当前路径

moveTo()把路径移动到画布中的指定点,不创建线条

closePath()创建从当前点回到起始点的路径

lineTo()添加一个新点,创建从该点到最后指定点的线条

clip()从原始画布剪切任意形状和尺寸的区域

quadraticCurveTo()创建第二次贝塞尔曲线

bezierCureTo()创建上次方贝塞尔曲线

arc()创建弧/曲线(用于创建圆形或部分圆)

arcTo()创建两切线之间的弧/曲线

isPointInPath()如果指定的点位于当前路径中,返回布尔值

矩形

         Rect()创建矩形

         fillRect()绘制”被填充”的矩形

strokeRect()绘制矩形(无填充)

clearRect()在给定的矩形内清除指定的像素

设置文本属性和方法

         属性:

         font 设置或返回文本内容的当前字体属性

         textAlign设置或返回文本内容的当前对齐方式

textBaseline 设置会返回在绘制文本时使用的当前文本基线.

         方法:

fillText()在画布上绘制”被填充的”文本

strokeText()在画布上绘制文本(无填充)

measureText()返回包含指定文本宽度的对象

转换方法

         scale() 缩放当前绘图至更大或更小

         rotate() 旋转当前绘图

         translate()重新映射花布衫的(0,0)位置

         transform()替换绘图的当前转换矩阵

setTransform()将当前转换重置为单位矩阵.然后运行transform()

HTML / CSS 相关文章推荐
css3的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 #HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 #HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 #HTML / CSS
HTML5中drawImage用法分析
Dec 01 #HTML / CSS
html5+css3气泡组件的实现
Nov 21 #HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 #HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 #HTML / CSS
You might like
来自phpguru得Php Cache类源码
2010/04/15 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
python中pass语句用法实例分析
2015/04/30 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python实现机器学习之元线性回归
2018/09/06 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
django ORM之values和annotate使用详解
2020/05/19 Python
python 读取.nii格式图像实例
2020/07/01 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
小学生元旦广播稿
2014/02/21 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
redis 查看所有的key方式
2021/05/07 Redis
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA