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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
深入理解css属性的选择对动画性能的影响
Apr 20 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 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
PHP高级编程实例:编写守护进程
2014/09/02 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
2017/02/15 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python 的类、继承和多态详解
2017/07/16 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
查看django版本的方法分享
2018/05/14 Python
python实现画一颗树和一片森林
2018/06/25 Python
对Python中内置异常层次结构详解
2018/10/18 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
协议书怎么写
2014/04/21 职场文书
货款欠条范本
2015/07/03 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle