By

Contents
  1. 1. Forword
  2. 2. Introduction
  3. 3. Browser support
  4. 4. canvasAPI
    1. 4.1. 颜色、样式和阴影
      1. 4.1.1. （属性值）
    2. 4.2. 线条样式
    3. 4.3. 矩形
    4. 4.4. 路径
    5. 4.5. 转换
      1. 4.5.1. （参数值）
    6. 4.6. 文本
    7. 4.7. 图像绘制
    8. 4.8. 像素操作
    9. 4.9. 合成
    10. 4.10. 其他
  5. 5. 附录1：HTML DOM事件
    1. 5.1. 目标事件对象
      1. 5.1.1. （参数说明）
    2. 5.2. 鼠标事件
    3. 5.3. 键盘事件
    4. 5.4. 鼠标/键盘事件对象
    5. 5.5. 拖动事件
    6. 5.6. 滚轮事件
  6. 6. 参考文档

Forword

本文在w3school和w3cschool的文档基础上进行增删改，方法加入了具体参数是文档看起来更加清爽好像可以看的懂了，删去一些无用的API，后期加入Procesing中的对应语法。（资深社区吸血鬼）

Introduction

HTML5 canvas 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，canvas 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext(“2d”) 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

Browser support

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 canvas 及其属性和方法。

注释：Internet Explorer 8 以及更早的版本不支持 canvas 元素。H5新标签

canvasAPI

颜色、样式和阴影

属性 描述 值
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式 color/gradient/pattern
strokeStyle 设置或返回用于笔触的颜色、渐变或模式 color/gradient/pattern
shadowColor 设置或返回用于阴影的颜色 color
shadowBlur 设置或返回用于阴影的模糊级别 number
shadowOffsetX 设置或返回阴影距形状的水平距离 number
shadowOffsetY 设置或返回阴影距形状的垂直距离 number
方法 描述 参数值说明
createLinearGradient(x0,y0,x1,y1) 创建线性渐变（用在画布内容上） 渐变的开始与结束的坐标
createPattern(image,repeatMode) 在指定的方向上重复指定的元素 “repeat/repeat-x/repeat-y/no-repeat”
createRadialGradient(x0,y0,r0,x1,y1,r1) 创建放射状/环形的渐变（用在画布内容上） 渐变开始与结束的圆坐标和半径
addColorStop(stop,color) 规定渐变对象中的颜色和停止位置 0.0~1.0表示渐变位置

（属性值）

值 描述
color 指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient 用于填充绘图的渐变对象（线性或放射性）
pattern 用于填充绘图的 pattern 对象

线条样式

属性 描述 值
lineCap 设置或返回线条的结束端点样式 “butt/round/square”
lineJoin 设置或返回两条线相交时，所创建的拐角类型 “bevel/round/miter”
lineWidth 设置或返回当前的线条宽度 number
miterLimit 设置或返回最大斜接长度 number

矩形

方法 描述 参数值说明
rect(x,y,width,height) 创建矩形 左上坐标与宽高
fillRect(x,y,width,height) 绘制“被填充”的矩形 左上坐标与宽高
strokeRect(x,y,width,height) 绘制矩形（无填充） 左上坐标与宽高
clearRect(x,y,width,height) 在给定的矩形内清除指定的像素 左上坐标与宽高

路径

方法 描述 参数
fill() 填充当前绘图（路径） 无
stroke() 绘制已定义的路径 无
beginPath() 起始一条路径，或重置当前路径 无
moveTo(x,y) 把路径移动到画布中的指定点，不创建线条 目标位置的坐标
closePath() 创建从当前点回到起始点的路径 无
lineTo(x,y) 添加一个新点，然后在画布中创建从该点到最后指定点的线条 目标位置的坐标
clip() 从原始画布剪切任意形状和尺寸的区域 无
arc(x,y,r,sAngle,eAngle,w) 创建弧/曲线（用于创建圆形或部分圆） 圆的坐标半径、起始和结束角、方向顺0逆1
arcTo(x1,y1,x2,y2,r) 创建两切线之间的弧/曲线 弧的起终点坐标和半径
isPointInpath(x, y) 如果指定的点位于当前路径中，则返回 true，否则返回 false 测试坐标

转换

方法 描述 参数说明
scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 比例系数number
rotate(angle) 旋转当前绘图 弧度，顺时针
translate(x,y) 重新映射画布上的 (0,0) 位置 平移坐标值
transform(a,b,c,d,e,f) 替换绘图的当前转换矩阵 见下表
setTransform(a,b,c,d,e,f) 将当前转换重置为单位矩阵。然后运行transform() 见下表

（参数值）

参数 描述
a 水平缩放绘图
b 水平倾斜绘图
c 垂直倾斜绘图
d 垂直缩放绘图
e 水平移动绘图
f 垂直移动绘图

文本

属性 描述 值
font 设置或返回文本内容的当前字体属性 “italic small-caps bold 12px arial”
textAlign 设置或返回文本内容的当前对齐方式 “center/end/left/right/start”
textBaseline 设置或返回在绘制文本时使用的当前文本基线 “alphabetic/top/hanging/middle/ideographic/bottom”
方法 描述 参数说明
fillText(text,x,y,maxWidth) 在画布上绘制“被填充的”文本 文字、起始坐标、最大文本宽度（可选）
strokeText(text,x,y,maxWidth) 在画布上绘制文本（无填充） 文字、起始坐标、最大文本宽度（可选）
measureText(text) 返回包含指定文本宽度的对象 .width：文本宽度

图像绘制

方法 描述 参数说明
drawImage(img,x,y) 向画布上绘制图像、画布或视频 图片左上坐标
drawImage(img,x,y,width,height) 向画布上绘制图像、画布或视频 规定图像宽高
drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 向画布上绘制图像、画布或视频 定位被剪切的部分

像素操作

属性 描述 值
width 返回 ImageData 对象的宽度 imgData.width 返回number
height 返回 ImageData 对象的高度 imgData.height 返回number
data 返回一个对象，其包含指定的 ImageData 对象的图像数据 imageData.data 返回obj
方法 描述 参数
createImageData(width,height/imageData) 创建新的、空白的 ImageData 对象 一个ImageData对象的宽高或者另一个ImageData对象
getImageData(x,y,width,height) 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 左上坐标，复制宽高
putImageData(imgData,x,y,dX,dY,dW,dH) 把图像数据（从指定的 ImageData 对象）放回画布上 iD对象，左上坐标，放置位置(可选)，使用宽高(可选)

合成

属性 描述 参数
globalAlpha 设置或返回绘图的当前 alpha 或透明值 0.0~1.0的不透明度
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上 “source-in”参数很多建议看文档

其他

方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()

附录1：HTML DOM事件

目标事件对象

方法 描述 DOM（事件级别）
addEventListener 允许在目标事件中注册监听事件(IE8 = attachEvent())； element.addEventListener(“event”, function, useCapture); 2

兼容问题

1
2
3
4
5
if (document.addEventListener) {                //所有主流浏览器，除了 IE 8 及更早 IE版本
    document.addEventListener("click", myFunction);
} else if (document.attachEvent) {             // IE 8 及更早 IE 版本
    document.attachEvent("onclick", myFunction);
}

（参数说明）

参数 描述
event 必须。字符串，指定事件名。注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function 必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行； false- 默认。事件句柄在冒泡阶段执行

鼠标事件

属性 描述 DOM
onclick 当用户点击某个对象时调用的事件句柄。 2
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。 2
onmousedown 鼠标按钮被按下。 2
onmouseenter 当鼠标指针移动到元素上时触发。 2
onmouseleave 当鼠标指针移出元素时触发 2
onmousemove 鼠标被移动。 2
onmouseover 鼠标移到某元素之上。 2
onmouseout 鼠标从某元素移开。 2
onmouseup 鼠标按键被松开。 2

键盘事件

属性 描述 DOM
onkeydown 某个键盘按键被按下。 2
onkeypress 某个键盘按键被按下并松开。 2
onkeyup 某个键盘按键被松开。 2

鼠标/键盘事件对象

属性 描述 DOM
altKey 返回当事件被触发时，”ALT” 是否被按下。 2
button 返回当事件被触发时，哪个鼠标按钮被点击。 2
clientX 返回当事件被触发时，鼠标指针的水平坐标。 2
clientY 返回当事件被触发时，鼠标指针的垂直坐标。 2
ctrlKey 返回当事件被触发时，”CTRL” 键是否被按下。 2
Location 返回按键在设备上的位置 3
charCode 返回onkeypress事件触发键值的字母代码。 2
key 在按下按键时返回按键的标识符。 3
keyCode 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 2
which 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 2
metaKey 返回当事件被触发时，”meta” 键是否被按下。 2
relatedTarget 返回与事件的目标节点相关的节点。 2
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。 2
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 2
shiftKey 返回当事件被触发时，”SHIFT” 键是否被按下。 2
方法 描述 DOM
initMouseEvent() 初始化鼠标事件对象的值 2
initKeyboardEvent() 初始化键盘事件对象的值 3

拖动事件

事件 描述 DOM
ondrag 该事件在元素正在拖动时触发
ondragend 该事件在用户完成元素的拖动时触发
ondragenter 该事件在拖动的元素进入放置目标时触发
ondragleave 该事件在拖动元素离开放置目标时触发
ondragover 该事件在拖动元素在放置目标上时触发
ondragstart 该事件在用户开始拖动元素时触发
ondrop 该事件在拖动元素放置在目标区域时触发

滚轮事件

事件 描述 DOM
onwheel 该事件在鼠标滚轮在元素上下滚动时触发

注：safary不支持

参考文档

http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.w3cschool.cc/jsref/met-document-addeventlistener.html

Contents
  1. 1. Forword
  2. 2. Introduction
  3. 3. Browser support
  4. 4. canvasAPI
    1. 4.1. 颜色、样式和阴影
      1. 4.1.1. （属性值）
    2. 4.2. 线条样式
    3. 4.3. 矩形
    4. 4.4. 路径
    5. 4.5. 转换
      1. 4.5.1. （参数值）
    6. 4.6. 文本
    7. 4.7. 图像绘制
    8. 4.8. 像素操作
    9. 4.9. 合成
    10. 4.10. 其他
  5. 5. 附录1：HTML DOM事件
    1. 5.1. 目标事件对象
      1. 5.1.1. （参数说明）
    2. 5.2. 鼠标事件
    3. 5.3. 键盘事件
    4. 5.4. 鼠标/键盘事件对象
    5. 5.5. 拖动事件
    6. 5.6. 滚轮事件
  6. 6. 参考文档