HTML5 界面元素 Canvas 參考手冊

太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的漂亮人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

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

fillStyle

Sets or returns the color, gradient, or pattern used to fill the drawing

strokeStyle

Sets or returns the color, gradient, or pattern used for strokes

shadowColor

Sets or returns the color to use for shadows

shadowBlur

Sets or returns the blur level for shadows

shadowOffsetX

Sets or returns the horizontal distance of the shadow from the shape

shadowOffsetY

Sets or returns the vertical distance of the shadow from the shape

Method

Description

createLinearGradient()

Creates a linear gradient (to use on canvas content)

createPattern()

Repeats a specified element in the specified direction

createRadialGradient()

Creates a radial/circular gradient (to use on canvas content)

addColorStop()

Specifies the colors and stop positions in a gradient object

线条样式
Line Styles

Property

Description

lineCap

Sets or returns the style of the end caps for a line

lineJoin

Sets or returns the type of corner created, when two lines meet

lineWidth

Sets or returns the current line width

miterLimit

Sets or returns the maximum miter length

矩形
Rectangles

Method

Description

rect()

Creates a rectangle

fillRect()

Draws a "filled" rectangle

strokeRect()

Draws a rectangle (no fill)

clearRect()

Clears the specified pixels within a given rectangle

路径
Paths

Method

Description

fill()

Fills the current drawing (path)

stroke()

Actually draws the path you have defined

beginPath()

Begins a path, or resets the current path

moveTo()

Moves the path to the specified point in the canvas, without creating a line

closePath()

Creates a path from the current point back to the starting point

lineTo()

Adds a new point and creates a line from that point to the last specified point in the canvas

clip()

Clips a region of any shape and size from the original canvas

quadraticCurveTo()

Creates a quadratic Bézier curve

bezierCurveTo()

Creates a cubic Bézier curve

arc()

Creates an arc/curve (used to create circles, or parts of circles)

arcTo()

Creates an arc/curve between two tangents

isPointInPath()

Returns true if the specified point is in the current path, otherwise false

转换
Transformations

Method

Description

scale()

Scales the current drawing bigger or smaller

rotate()

Rotates the current drawing

translate()

Remaps the (0,0) position on the canvas

transform()

Replaces the current transformation matrix for the drawing

setTransform()

Resets the current transform to the identity matrix. Then runs transform()

文本
Text

Property

Description

font

Sets or returns the current font properties for text content

textAlign

Sets or returns the current alignment for text content

textBaseline

Sets or returns the current text baseline used when drawing text

Method

Description

fillText()

Draws "filled" text on the canvas

strokeText()

Draws text on the canvas (no fill)

measureText()

Returns an object that contains the width of the specified text

图像绘制
Image Drawing

Method

Description

drawImage()

Draws an image, canvas, or video onto the canvas

像素操作
Pixel Manipulation

Property

Description

width

Returns the width of an ImageData object

height

Returns the height of an ImageData object

data

Returns an object that contains image data of a specified ImageData object

Method

Description

createImageData()

Creates a new, blank ImageData object

getImageData()

Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas

putImageData()

Puts the image data (from a specified ImageData object) back onto the canvas

混合
Compositing

Property

Description

globalAlpha

Sets or returns the current alpha or transparency value of the drawing

globalCompositeOperation

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 參考手冊的更多相关文章

  1. 6. GC 调优(工具篇) - GC參考手冊

    进行GC性能调优时, 须要明白了解, 当前的GC行为对系统和用户有多大的影响. 有多种监控GC的工具和方法, 本章将逐一介绍经常使用的工具. 您应该已经阅读了前面的章节: 垃圾收集简单介绍 - GC參 ...

  2. ANTLR4权威參考手冊(一)

    写在前面的话: 此文档是对伟大的Terence Parr的著作<the definitive antlr4 reference>的翻译本.致敬!欢迎转载,请注明原地址,请尊重劳动成果.翻译 ...

  3. Hadoop 2.6.0分布式部署參考手冊

    Hadoop 2.6.0分布式部署參考手冊 关于本參考手冊的word文档.能够到例如以下地址下载:http://download.csdn.net/detail/u012875880/8291493 ...

  4. 刚開始学习的人非常有用之chm结尾的參考手冊打开后无法正常显示

    从网上下载了struts2的參考手冊.chm(本文适用全部已.chm结尾的文件)不能正常打开使用. 如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/ ...

  5. MySQL中文參考手冊

    非常好的中文手冊: 链接:http://www.sdau.edu.cn/support/mysq_doc/manual_toc.html

  6. bash參考手冊之六(Bash特性)

    6 Bash 特性 这部分描写叙述Bash独有的特性. *  调用Bash : Bash能够接受的命令行选项. *  Bash启动文件 : Bash何时及怎样运行脚本. *  交互Shell : 什么 ...

  7. bash參考手冊之五(shell变量)续三

    LINENO 当前在运行的脚本或者shell函数的行号. LINES 命令select用来确定打印选择列表的列宽.收到SIGWINCH后,自己主动设置. MACHTYPE 是一个字符串,描写叙述了正在 ...

  8. (十)unity4.6学习Ugui中文文档-------參考-UGUI Canvas Components

     大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unit ...

  9. 早来的圣诞礼物!--android 逆向菜鸟速參手冊完蛋版

    我的说明: 让老皮特整理了这么长时间这个手冊,心里挺过意不去的,回头我去深圳带着他女儿去游乐场玩玩得了,辛苦了.peter! 太多的话语,也描写叙述不出这样的感觉了,得找个时间.不醉不归... 注:下 ...

随机推荐

  1. SpringBoot中使用过滤器Filter

    场景:API的参数都是经过加密的,于是在过滤器中,将获取到的请求的参数先解密再去进行处理 一.实现Filter接口 public class TestFilter implements Filter ...

  2. 4.AND,OR

    4.WHERE中使用AND,OR连接多个过滤条件      AND:并且的关系,要求条件同时满足    OR:或者的关系,要求条件满足某一个就可以     //查询10部门,基本工资大于2000的员工 ...

  3. 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 ...

  4. ASP.NET-后台cookie与前台JQUERY解析cookie

    在controller中给cookie赋值 HttpCookie cookie =newHttpCookie("pageInfo"); cookie["page_inde ...

  5. uva 10641 (来当雷锋的这回....)

    #include<cstdio> #include<cstring> #include<algorithm> #include<cmath> using ...

  6. 操作系统 之 哈希表 Linux 内核 应用浅析

    1.基本概念         散列表(Hash  table.也叫哈希表).是依据关键码值(Key  value)而直接进行訪问的数据结构. 也就是说,它通过把关键码值映射到表中一个位置来訪问记录.以 ...

  7. Codeforces Round #274 (Div. 2) 解题报告

    题目地址:http://codeforces.com/contest/479 这次自己又仅仅能做出4道题来. A题:Expression 水题. 枚举六种情况求最大值就可以. 代码例如以下: #inc ...

  8. hdu1213 How Many Tables(并查集)

    How Many Tables Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. 朝花夕拾——finally/final/finalize拨云雾见青天

    Java编程中.常常会使用到异常处理,而finally看似的是try/catch后对逻辑处理的完好,事实上里面却存在非常多隐晦的陷阱.final常见于变量修饰,那么你在内部类中也见过吧.finaliz ...

  10. 51nod-1359: 循环探求

    [传送门:51nod-1359] 简要题意: 给出n和k,求出最小的x满足$n^{x}≡n(mod\;10^{k})$ 题解: 真是一道有(du)趣(liu)题目 首先我们设X[k-1]为$n^{x} ...