Canvas笔记

Tutorial

usage

default size:300px * 150px

not using CSS

<canvas id="" width="" height=""> </canvas>

渲染上下文

var canvas = document.getElementById('id');
var ctx = canvas.getContext('2d');

检查支持性

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

绘制

栅格

网格是左上角为(0,0)，向右为x正方向，向下为y正方向

绘制矩形

(x,y)为矩形左上角坐标

fillRect(x, y, width, height)
绘制填充矩形

storkeRect(x, y, width, height)
绘制矩形边框

clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明

绘制路径

beginPath()
新建一条路径

closePath()
闭合路径

stroke()
绘制图形轮廓

fill()
填充区域

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo()，无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

移动笔触

moveTo(x, y)
将笔触移动到指定坐标

如果没有moveTo()会变成一条连续的线

线

lineTo(x, y)
绘制一条从当前位置到指定坐标的线

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:弧度=(Math.PI/180) * 角度。

二次贝塞尔曲线及三次贝塞尔曲线

Bézier curve

quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

矩形

rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

Path2D对象

Path2D()
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

Path2D.addPath(path [, transform])​
添加了一条路径到当前路径（可能添加了一个变换矩阵）。

关于Path2D()

颜色

fillStyle = color
设置图形的填充颜色。

strokeStyle = color
设置图形轮廓的颜色

color是符合CSS3color 的字符串

透明度

globalAlpha = transparencyValue
这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。
globalAlpha 属性在需要绘制大量拥有相同透明度的图形时候相当高效。

因为 strokeStyle 和 fillStyle 属性接受符合 CSS 3 规范的颜色值，那我们可以用下面的写法来设置具有透明度的颜色。

// 指定透明颜色，用于描边和填充样式
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

rgba() 方法与 rgb() 方法类似，就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0（完全透明）到 1.0（完全不透明）。

线型

lineWidth = value
设置线条宽度。

lineCap = type
设置线条末端样式。

type 参数为: butt，round 和 square。默认是 butt。
butt 是刚好平齐，round 和 square 都会多出一块，一个是圆形，一个是矩形。

lineJoin = type
设定线条与线条间接合处的样式。
type 参数为: round, bevel 和 miter。默认是 miter。
折线分别为圆弧形，被切去尖角，尖角

miterLimit = value
限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。
可以限制上面的参数，miter超过限制时就会变成bevel

getLineDash()
返回一个包含当前虚线样式，长度为非负偶数的数组。

setLineDash(segments)
设置当前虚线样式。接受一个数组，设置线段和间隙。

lineDashOffset = value
设置虚线样式的起始偏移量。

渐变

createLinearGradient(x1, y1, x2, y2)
createLinearGradient 方法接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

createRadialGradient(x1, y1, r1, x2, y2, r2)
createRadialGradient 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

gradient.addColorStop(position, color)
addColorStop 方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）。

然后可以将这些渐变色赋值给fillStyle 和 strokeStyle

图案样式

createPattern(image, type)
该方法接受两个参数。Image 可以是一个 Image 对象的引用，或者另一个 canvas 对象。
Type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat。

图案的应用跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可。

阴影

shadowOffsetX = float
shadowOffsetY = float
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

shadowBlur = float
shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0。

shadowColor = color
shadowColor 是标准的 CSS 颜色值，用于设定阴影颜色效果，默认是全透明的黑色。

Canvas 填充规则

当我们用到 fill（或者 clip和isPointinPath）你可以选择一个填充规则，该填充规则根据某处在路径的外面或者里面来决定该处是否被填充，这对于自己与自己路径相交或者路径被嵌套的时候是有用的。

两个可取的值：
“nonzero”: non-zero winding rule, 默认值.
“evenodd”: even-odd winding rule.

绘制文本

fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

文本样式

font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
ltr: left-to-right,rtl: right-to-left

measureText()
将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性，可以获得更多细节。

图像

获取图片

HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的元素

HTMLVideoElement
用一个HTML的

HTMLCanvasElement
可以使用另一个 元素作为你的图片源。

ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

详细使用请移步吧…

绘制图片

drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

变形

状态保存和恢复

save()restore()
save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

一个绘画状态包括：
当前应用的变形（即移动，旋转和缩放，见下）
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值

移动

translate(x, y)
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，用来移动 canvas 和它的原点到一个不同的位置。

旋转

rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法。

缩放

scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。

变形

transform(m11, m12, m21, m22, dx, dy)
这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵
m11：水平方向的缩放
m12：水平方向的倾斜偏移
m21：竖直方向的倾斜偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动

setTransform(m11, m12, m21, m22, dx, dy)

resetTransform()

组合

globalCompositeOperation = type
这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串。

type	Description
source-over	这是默认设置，并在现有画布上下文之上绘制新图形。
source-in	新图形只在新图形和目标画布重叠的地方绘制。其他的都是透明的。
source-out	在不与现有画布内容重叠的地方绘制新图形。
source-atop	新图形只在与现有画布内容重叠的地方绘制。
destination-over	在现有的画布内容后面绘制新的图形。
destination-in	现有的画布内容保持在新图形和现有画布内容重叠的位置。其他的都是透明的。
destination-out	现有内容保持在新图形不重叠的地方。
destination-atop	现有的画布只保留与新图形重叠的部分，新的图形是在画布内容后面绘制的。
lighter	两个重叠图形的颜色是通过颜色值相加来确定的。
copy	只显示新图形。
xor	图像中，那些重叠和正常绘制之外的其他地方是透明的。
multiply	将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片。
screen	像素被倒转，相乘，再倒转，结果是一幅更明亮的图片。
overlay	multiply和screen的结合，原本暗的地方更暗，原本亮的地方更亮。
darken	保留两个图层中最暗的像素。
lighten	保留两个图层中最亮的像素。
color-dodge	将底层除以顶层的反置。
color-burn	将反置的底层除以顶层，然后将结果反过来。
hard-light	屏幕相乘（A combination of multiply and screen）类似于叠加，但上下图层互换了。
soft-light	用顶层减去底层或者相反来得到一个正值。
difference	一个柔和版本的强光（hard-light）。纯黑或纯白不会导致纯黑或纯白。
exclusion	和difference相似，但对比度较低。
hue	保留了底层的亮度（luma）和色度（chroma），同时采用了顶层的色调（hue）。
saturation	保留底层的亮度（luma）和色调（hue），同时采用顶层的色度（chroma）。
color	保留了底层的亮度（luma），同时采用了顶层的色调(hue)和色度(chroma)。
luminosity	保持底层的色调（hue）和色度（chroma），同时采用顶层的亮度（luma）。

裁切路径

clip()
将当前正在构建的路径转换为当前的裁剪路径。

限制绘制区域

基本动画

基本步骤

清空 canvas
除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。

保存 canvas 状态
如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。

绘制动画图形（animated shapes）
这一步才是重绘动画帧。

恢复 canvas 状态
如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

操控动画

更新画布
首先，可以用window.setInterval(), window.setTimeout(),和window.requestAnimationFrame()来设定定期执行一个指定函数。

setInterval(function, delay)
当设定好间隔时间后，function会定期执行。

setTimeout(function, delay)
在设定好的时间之后执行函数

requestAnimationFrame(callback)
告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。

高级动画

一个事件库

像素操作

ImageData对象

width
图片宽度，单位是像素

height
图片高度，单位是像素

data
Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）

创建ImageData对象

var myImageData = ctx.createImageData(width, height);
var myImageData = ctx.createImageData(anotherImageData);

创建出来的像素都被预设成透明黑

得到场景像素数据

var myImageData = ctx.getImageData(left, top, width, height);

在场景中写入像素数据

ctx.putImageData(myImageData, dx, dy);