HTML5 界面元素 Canvas 參考手冊
HTML5 界面元素 Canvas 參考手冊
太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
HTML5 界面元素 Canvas 參考手冊
HTML Canvas Reference
描写叙述
Description
The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.
The getContext() method returns an object that provides methods and properties for drawing on the canvas.
This reference will cover the properties and methods of the getContext("2d") object, which can be used to draw text, lines, boxes, circles, and more - on the canvas.
浏览器支持
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support <canvas> and its properties and methods.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.
颜色、样式和阴影
Colors, Styles, and Shadows
Property |
Description |
Sets or returns the color, gradient, or pattern used to fill the drawing |
|
Sets or returns the color, gradient, or pattern used for strokes |
|
Sets or returns the color to use for shadows |
|
Sets or returns the blur level for shadows |
|
Sets or returns the horizontal distance of the shadow from the shape |
|
Sets or returns the vertical distance of the shadow from the shape |
Method |
Description |
Creates a linear gradient (to use on canvas content) |
|
Repeats a specified element in the specified direction |
|
Creates a radial/circular gradient (to use on canvas content) |
|
Specifies the colors and stop positions in a gradient object |
线条样式
Line Styles
Property |
Description |
Sets or returns the style of the end caps for a line |
|
Sets or returns the type of corner created, when two lines meet |
|
Sets or returns the current line width |
|
Sets or returns the maximum miter length |
矩形
Rectangles
Method |
Description |
Creates a rectangle |
|
Draws a "filled" rectangle |
|
Draws a rectangle (no fill) |
|
Clears the specified pixels within a given rectangle |
路径
Paths
Method |
Description |
Fills the current drawing (path) |
|
Actually draws the path you have defined |
|
Begins a path, or resets the current path |
|
Moves the path to the specified point in the canvas, without creating a line |
|
Creates a path from the current point back to the starting point |
|
Adds a new point and creates a line from that point to the last specified point in the canvas |
|
Clips a region of any shape and size from the original canvas |
|
Creates a quadratic Bézier curve |
|
Creates a cubic Bézier curve |
|
Creates an arc/curve (used to create circles, or parts of circles) |
|
Creates an arc/curve between two tangents |
|
Returns true if the specified point is in the current path, otherwise false |
转换
Transformations
Method |
Description |
Scales the current drawing bigger or smaller |
|
Rotates the current drawing |
|
Remaps the (0,0) position on the canvas |
|
Replaces the current transformation matrix for the drawing |
|
Resets the current transform to the identity matrix. Then runs transform() |
文本
Text
Property |
Description |
Sets or returns the current font properties for text content |
|
Sets or returns the current alignment for text content |
|
Sets or returns the current text baseline used when drawing text |
Method |
Description |
Draws "filled" text on the canvas |
|
Draws text on the canvas (no fill) |
|
Returns an object that contains the width of the specified text |
图像绘制
Image Drawing
Method |
Description |
Draws an image, canvas, or video onto the canvas |
像素操作
Pixel Manipulation
Property |
Description |
Returns the width of an ImageData object |
|
Returns the height of an ImageData object |
|
Returns an object that contains image data of a specified ImageData object |
Method |
Description |
Creates a new, blank ImageData object |
|
Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas |
|
Puts the image data (from a specified ImageData object) back onto the canvas |
混合
Compositing
Property |
Description |
Sets or returns the current alpha or transparency value of the drawing |
|
Sets or returns how a new image are drawn onto an existing image |
其他
Other
Method |
Description |
save() |
Saves the state of the current context |
restore() |
Returns previously saved path state and attributes |
createEvent() |
|
getContext() |
|
toDataURL() |
HTML5 界面元素 Canvas 參考手冊的更多相关文章
- 6. GC 调优(工具篇) - GC參考手冊
进行GC性能调优时, 须要明白了解, 当前的GC行为对系统和用户有多大的影响. 有多种监控GC的工具和方法, 本章将逐一介绍经常使用的工具. 您应该已经阅读了前面的章节: 垃圾收集简单介绍 - GC參 ...
- ANTLR4权威參考手冊(一)
写在前面的话: 此文档是对伟大的Terence Parr的著作<the definitive antlr4 reference>的翻译本.致敬!欢迎转载,请注明原地址,请尊重劳动成果.翻译 ...
- Hadoop 2.6.0分布式部署參考手冊
Hadoop 2.6.0分布式部署參考手冊 关于本參考手冊的word文档.能够到例如以下地址下载:http://download.csdn.net/detail/u012875880/8291493 ...
- 刚開始学习的人非常有用之chm结尾的參考手冊打开后无法正常显示
从网上下载了struts2的參考手冊.chm(本文适用全部已.chm结尾的文件)不能正常打开使用. 如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/ ...
- MySQL中文參考手冊
非常好的中文手冊: 链接:http://www.sdau.edu.cn/support/mysq_doc/manual_toc.html
- bash參考手冊之六(Bash特性)
6 Bash 特性 这部分描写叙述Bash独有的特性. * 调用Bash : Bash能够接受的命令行选项. * Bash启动文件 : Bash何时及怎样运行脚本. * 交互Shell : 什么 ...
- bash參考手冊之五(shell变量)续三
LINENO 当前在运行的脚本或者shell函数的行号. LINES 命令select用来确定打印选择列表的列宽.收到SIGWINCH后,自己主动设置. MACHTYPE 是一个字符串,描写叙述了正在 ...
- (十)unity4.6学习Ugui中文文档-------參考-UGUI Canvas Components
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...
- 早来的圣诞礼物!--android 逆向菜鸟速參手冊完蛋版
我的说明: 让老皮特整理了这么长时间这个手冊,心里挺过意不去的,回头我去深圳带着他女儿去游乐场玩玩得了,辛苦了.peter! 太多的话语,也描写叙述不出这样的感觉了,得找个时间.不醉不归... 注:下 ...
随机推荐
- SpringBoot中使用过滤器Filter
场景:API的参数都是经过加密的,于是在过滤器中,将获取到的请求的参数先解密再去进行处理 一.实现Filter接口 public class TestFilter implements Filter ...
- 4.AND,OR
4.WHERE中使用AND,OR连接多个过滤条件 AND:并且的关系,要求条件同时满足 OR:或者的关系,要求条件满足某一个就可以 //查询10部门,基本工资大于2000的员工 ...
- Lock-less and zero copy messaging scheme for telecommunication network applications
A computer-implemented system and method for a lock-less, zero data copy messaging mechanism in a mu ...
- ASP.NET-后台cookie与前台JQUERY解析cookie
在controller中给cookie赋值 HttpCookie cookie =newHttpCookie("pageInfo"); cookie["page_inde ...
- uva 10641 (来当雷锋的这回....)
#include<cstdio> #include<cstring> #include<algorithm> #include<cmath> using ...
- 操作系统 之 哈希表 Linux 内核 应用浅析
1.基本概念 散列表(Hash table.也叫哈希表).是依据关键码值(Key value)而直接进行訪问的数据结构. 也就是说,它通过把关键码值映射到表中一个位置来訪问记录.以 ...
- Codeforces Round #274 (Div. 2) 解题报告
题目地址:http://codeforces.com/contest/479 这次自己又仅仅能做出4道题来. A题:Expression 水题. 枚举六种情况求最大值就可以. 代码例如以下: #inc ...
- hdu1213 How Many Tables(并查集)
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 朝花夕拾——finally/final/finalize拨云雾见青天
Java编程中.常常会使用到异常处理,而finally看似的是try/catch后对逻辑处理的完好,事实上里面却存在非常多隐晦的陷阱.final常见于变量修饰,那么你在内部类中也见过吧.finaliz ...
- 51nod-1359: 循环探求
[传送门:51nod-1359] 简要题意: 给出n和k,求出最小的x满足$n^{x}≡n(mod\;10^{k})$ 题解: 真是一道有(du)趣(liu)题目 首先我们设X[k-1]为$n^{x} ...