变形
在了解变形之前，先了解状态。
- 状态
canvas 的状态就是当前画面应用的所有样式和变形的一个快照，用来操作这个状态有两个绘制复杂图形时必不可少的方法：save()和restore() 。save()用来保存当前状态，restore()用来恢复刚才保存的状态。他们都可以多次调用。
ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 150, 150);
ctx.save(); //保存当前状态
ctx.fillStyle= '#fff';
ctx.fillRect(45, 45, 100, 100);
ctx.restore(); //恢复到刚才保存的状态
ctx.fillRect(70, 70, 50, 50);
- 位移
translate(x, y)
translate方法，它用来移动 canvas 和它的原点到一个不同的位置。
demo:
var ctx = document.getElementById('canvas').getContext('2d');
for(var i = 1; i< 4; i++) {
ctx.save(); //使用save方法保存状态，让每次位移时都针对（0，0）移动。
ctx.translate(100*i, 0);
ctx.fillRect(0, 50, 50, 50);
ctx.restore();
}
-
旋转
rotate(angle)rotate它用于以原点为中心旋转: 旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
ctx.rotate(Math.PI * 2) //参照原点顺时针旋转360度
demo:
ctx.translate(75,75); //把原点移动到(75, 75);
for (var i=1; i<6; i++){ // 从里到外一共6圈
ctx.save();
ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
for (var j=0; j<i*6; j++){ // 每一圈有i*6个圆点
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
- 缩放
scale
ctx.scale(x, y); //基于原点缩放，x、y是两个轴的缩放倍数
demo:
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.scale(0.8, 1.2);
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();
- 变形
transforms
transform(m11, m12, m21, m22, dx, dy)
m11：水平方向的缩放
m12：水平方向的偏移
m21：竖直方向的偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动
动画
一帧一帧的来渲染这个元素，而且这个元素每一帧的位置都不一样，我们的眼睛看到的就是动画了。实现起来也很方便，js提供了两个方法：setTimeout 和setInterval都可以实现，但是一个有逼格的程序员实现动画是不会用这两个方法的，而是用requestAnimationFrame这个方法。有什么区别呢？下面简单做个比较。
-
setInterval(myFun, 10);意思是隔一毫秒执行一个myFun函数，但是这样就有一个问题了，比如我myFun函数里面绘制的东西比较耗时，而10ms之内还没有完全绘制出来，但是这段代码强制1ms之后又开始绘制下一帧了，所以就会出现丢帧的问题；反之，如果时间设置太长，就会出现画面不流畅、视觉卡顿的问题。 -
requestAnimationFrame(myFun);如果我们这样写，又是什么意思呢？意思是根据一定的时间间隔，会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了，总之，它会保证你绘制完这一帧，才会绘制下一帧，保证性能的同时，也保证动画的流畅
基本步驟：
- 清空 canvas
除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。
- 保存 canvas 状态
如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。
- 绘制动画图形（animated shapes）
这一步才是重绘动画帧。
- 恢复 canvas 状态
如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。
高级动画
动画主要是requestAnimationFrame方法，现在我们来实现一个在画布内滚动的实例
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = { //小球属性，原点位置，速度，半径等。
x: 100,
y: 100,
vx: 4,
vy: 2,
radius: 20,
color: 'blue',
draw: function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
}
};
function draw() {
ctx.clearRect(0,0, canvas.width, canvas.height); //绘制之前清除整个画布
ball.draw(); //在画布中绘制小球
ball.x += ball.vx; //改变小球位置坐标
ball.y += ball.vy; //改变小球位置坐标
if (ball.y + ball.vy > canvas.height-15 || ball.y + ball.vy < 15) { //边界判断
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width-15 || ball.x + ball.vx < 15) { //边界判断
ball.vx = -ball.vx;
}
window.requestAnimationFrame(draw); //循环执行
}
draw();
简单概括一下这个实例的实现思想:
创建一个小球对象，包含一个绘制自己的方法。在整个画布中绘制这个小球，然后在下一次绘制之前，先清除整个画布，改变小球的各个属性（包含了逻辑，比如边界的判断），然后重新绘制一遍，从而达到了动起来的效果。
如果你把上面代码中的ctx.clearRect(0,0, canvas.width, canvas.height);换成下面这样：
ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
就可以得到渐变尾巴的效果，大概意思就是使用半透明的白色背景填充画布来代替直接清除这个画布，从而实现了想要的效果。
像素操作
如果我们想对一个canvas画布进行如下操作：获取每一个点的信息，对每一个坐标点进行操作。那我们就需要了解一下ImageData对象了。
ImageData对象（由getImageData方法获取的）中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
- width
图片宽度，单位是像素。
- height
图片高度，单位是像素。
- data
Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。简单讲，就是一个数组，每四个元素存储一个点的颜色信息，这四个元素分别对应为R、G、B、A的值（知道颜色取值的一眼就明白了，不知道的也没关系，后面有实例，一看就明白）。
创建ImageData对象
去创建一个新的，空白的ImageData对像，你应该会使用createImageData()方法：
var myImageData = ctx.createImageData(width, height);
上面代码创建了一个新的具体特定尺寸的ImageData对像。所有像素被预设为透明黑。
获取像素数据
为了获得一个包含画布场景像素数据的ImageData对像，你可以用getImageData()方法：
var myImageData = ctx.getImageData(left, top, width, height);
创建的myImageData对象就有width、height、data三个属性的值了。看下面这个实例：
html:
<div id="color">hover处的颜色</div>
<canvas id="myCanvas" width="300" height="150"></canvas>
js:
var can = document.getElementById('myCanvas');
var ctx = can.getContext('2d');
var img = new Image();
img.src = "***.jpg";
ctx.drawImage(img, 0, 0);
var color = document.getElementById('color');
function pick(event) {
var x = event.layerX;
var y = event.layerY;
var area = ctx.getImageData(x, y, 1, 1); //创建ImageData对象
var data = area.data; //获取data属性（一个存储颜色rgba值的数组）
var rgba = 'rgba(' + data[0] + ',' + data[1] + ',' + data[2] + ',' + data[3] + ')';
color.style.color = rgba;
color.textContent = rgba;
}
can.addEventListener('mousemove', pick);
在场景中写入像素数据
你可以用putImageData()方法去对场景进行像素数据的写入
ctx.putImageData(myImageData, x, y); //在画布的(x, y)点开始绘制myImageData所存储的像素信息。
所以我们可以把获取到的像素信息进行处理，然后再重新绘制，就得到了新的图形。看看下面这个实例：
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = '***.jpg';
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0,0,canvas.width, canvas.height); //获取ImageData
var colors = imageData.data; //获取像素信息
function invert() {
for (var i = 0; i < colors.length; i += 4) { //四个为一组
colors[i] = 225 - colors[i]; // red
colors[i+1] = 225 - colors[i+1]; // green
colors[i+2] = 225 - colors[i+2]; // blue
colors[i+3] = 255; //alpha
}
ctx.putImageData(imageData, 220, 0); //从(220, 0)开始绘制改变过的颜色
}
function toGray() {
for (var i = 0; i < colors.length; i += 4) {
var avg = (colors[i] + colors[i+1] + colors[i+2]) / 3;
colors[i] = avg; // red
colors[i+1] = avg; // green
colors[i+2] = avg; // blue
colors[i+3] = 255; //alpha
}
ctx.putImageData(imageData, 440, 0); //从(440, 0)开始绘制改变过的颜色
}
invert(); //反转色
toGray(); //变灰色
性能优化
- 坐标点尽量用整数
浏览器为了达到抗锯齿的效果会做额外的运算。为了避免这种情况，请保证使用canvas的绘制函数时，尽量用Math.floor()函数对所有的坐标点取整。比如：
ctx.drawImage(myImage, 0.3, 0.5); //不提倡这样写，应该像下面这样处理
ctx.drawImage(myImage, Math.floor(0.3), Math.floor(0.5));
- 使用多个画布绘制复杂场景
比如做一个游戏，有几个层面：背景层（简单变化）、游戏层（时刻变化）。这个时候，我们就可以创建两个画布，一个专门用来绘制不变的背景（少量绘制），另一个用来绘制游戏动态部分（大量绘制），就像这样：
<canvas id="background-can" width="480" height="320"></canvas>
<canvas id="game-can" width="480" height="320"></canvas>
- 用CSS设置静态大图
如果有一层是永远不变的，比如一张静态的背景图，最好使用div+css的方法去替代ctx.drawimage()，这么做可以避免在每一帧在画布上绘制大图。简单讲，dom渲染肯定比canvas的操作性能更高。
- 尽量少操作canvas的缩放
如果要对一个画布进行缩放，如果可以的话，尽量使用CSS3的transform来实现。总之，记住一个原则，能用html+div实现的尽量不用js对canvas进行操作。
- more
- 将画布的函数调用集合到一起（例如，画一条折线，而不要画多条分开的直线）
- 使用不同的办法去清除画布(clearRect()、fillRect()、调整canvas大小)
- 尽可能避免 shadowBlur特性
- 有动画，请使用window.requestAnimationFrame() 而非window.setInterval()
