1. 概述
Canvas API（画布）用于在网页及时天生图象，而且能够操纵图象内容，基本上它是一个能够用JavaScript操纵的位图（bitmap）。
运用前，起首须要新建一个<canvas>网页元素。
<canvas id="myCanvas" width="400" height="200">
您的浏览器不支持canvas！
</canvas>
上面代码中，假如浏览器不支持这个API，则就会显现<canvas>标签中心的笔墨——“您的浏览器不支持canvas！”。
每一个canvas节点都有一个对应的context对象（上下文对象），Canvas API定义在这个context对象上面，所以须要猎取这个对象，要领是运用getContext要领。
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
}
上面代码中，getContext要领指定参数2d，示意该canvas节点用于天生2D图案（即平面图案）。假如参数是webgl，就示意用于天生3D图象（即平面图案），这部份现实上零丁叫做WebGL API。
2. 画图要领
canvas画布供应了一个用来作图的平面空间，该空间的每一个点都有本身的坐标，x示意横坐标，y示意竖坐标。原点(0, 0)位于图象左上角，x轴的正向是原点向右，y轴的正向是原点向下。
（1）绘制途径
beginPath要领示意最先绘制途径，moveTo(x, y)要领设置线段的出发点，lineTo(x, y)要领设置线段的尽头，stroke要领用来给通明的线段着色。
ctx.beginPath(); // 最先途径绘制
ctx.moveTo(20, 20); // 设置途径出发点，坐标为(20,20)
ctx.lineTo(200, 20); // 绘制一条到(200,20)的直线
ctx.lineWidth = 1.0; // 设置线宽
ctx.strokeStyle = '#CC0000'; // 设置线的颜色
ctx.stroke(); // 举行线的着色，这时候整条线才变得可见
moveto和lineto要领能够屡次运用。末了，还能够运用closePath要领，自动绘制一条当前点到出发点的直线，构成一个关闭图形，省却运用一次lineto要领。
（2）绘制矩形
fillRect(x, y, width, height)要领用来绘制矩形，它的四个参数离别为矩形左上角极点的x坐标、y坐标，以及矩形的宽和高。fillStyle属性用来设置矩形的添补色。
ctx.fillStyle = 'yellow';
ctx.fillRect(50, 50, 200, 100);
strokeRect要领与fillRect相似，用来绘制空心矩形。
ctx.strokeRect(10,10,200,100);
clearRect要领用来消灭某个矩形地区的内容。
ctx.clearRect(100,50,50,50);
（3）绘制文本
fillText(string, x, y) 用来绘制文本，它的三个参数离别为文本内容、出发点的x坐标、y坐标。运用之前，需用font设置字体、大小、款式（写法相似与CSS的font属性）。与此相似的另有strokeText要领，用来增加空心字。
ctx.font = "Bold 20px Arial"; // 设置字体
ctx.textAlign = "left";// 设置对齐体式格局
ctx.fillStyle = "#008600"; // 设置添补颜色
ctx.fillText("Hello!", 10, 50); // 设置字体内容，以及在画布上的位置
ctx.strokeText("Hello!", 10, 100); // 绘制空心字
fillText要领不支持文本断行，即一切文本出现在一行内。所以，假如要天生多行文本，只要挪用屡次fillText要领。
（4）绘制圆形和扇形
arc要领用来绘制扇形。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
arc要领的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的肇端角度和停止角度（以弧度示意），anticlockwise示意做图时应当逆时针画（true）照样顺时针画（false）。
下面是怎样绘制实心的圆形:
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.fillStyle = "#000000";
ctx.fill();
绘制空心圆形的例子:
ctx.beginPath();
ctx.arc(60, 60, 50, 0, Math.PI*2, true);
ctx.lineWidth = 1.0;
ctx.strokeStyle = "#000";
ctx.stroke();
（5）设置渐变色
createLinearGradient要领用来设置渐变色。
var myGradient = ctx.createLinearGradient(0, 0, 0, 160);
myGradient.addColorStop(0, "#BABABA");
myGradient.addColorStop(1, "#636363");
createLinearGradient要领的参数是(x1, y1, x2, y2)，个中x1和y1是出发点坐标，x2和y2是尽头坐标。经由过程差别的坐标值，能够天生从上至下、从左到右的渐变等等。
运用要领以下：
ctx.fillStyle = myGradient;
ctx.fillRect(10,10,200,100);
（6）设置暗影
一系列与暗影相干的要领，能够用来设置暗影。
ctx.shadowOffsetX = 10; // 设置程度位移
ctx.shadowOffsetY = 10; // 设置垂直位移
ctx.shadowBlur = 5; // 设置隐约度
ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置暗影颜色
ctx.fillStyle = "#CC0000";
ctx.fillRect(10,10,200,100);
3. 图象处置惩罚要领
drawImage要领
Canvas API 许可将图象文件插进去画布，做法是读取图片后，运用drawImage要领在画布内举行重绘。
var img = new Image();
img.src = 'image.png';
ctx.drawImage(img, 0, 0); // 设置对应的图象对象，以及它在画布上的位置
上面代码将一个PNG图象载入画布。drawImage()要领接收三个参数，第一个参数是图象文件的DOM元素（即<img>节点），第二个和第三个参数是图象左上角在画布中的坐标，上例中的(0, 0)就示意将图象左上角安排在画布的左上角。
因为图象的载入须要时候，drawImage要领只能在图象完整载入后才挪用，因而上面的代码须要改写。
var image = new Image();
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext('2d').drawImage(image, 0, 0);
// 插进去页面底部
document.body.appendChild(image);
return canvas;
}
image.src = 'image.png';
getImageData要领，putImageData要领
getImageData要领能够用来读取Canvas的内容，返回一个对象，包含了每一个像素的信息。
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
imageData对象有一个data属性，它的值是一个一维数组。该数组的值，依次是每一个像素的红、绿、蓝、alpha通道值，因而该数组的长度即是 图象的像素宽度 x 图象的像素高度 x 4，每一个值的局限是0–255。这个数组不仅可读，而且可写，因而经由过程操纵这个数组的值，就能够到达操纵图象的目标。修正这个数组今后，运用putImageData要领将数组内容从新绘制在Canvas上。
context.putImageData(imageData, 0, 0);
toDataURL要领
对图象数据做出修正今后，能够运用toDataURL要领，将Canvas数据从新转化成平常的图象文件情势。
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL('image/png');
return image;
}
上面的代码将Canvas数据，转化成PNG data URI。
save要领，restore要领
save要领用于保留上下文环境，restore要领用于恢复到上一次保留的上下文环境。
ctx.save();
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 5;
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.fillStyle = '#CC0000';
ctx.fillRect(10,10,150,100);
ctx.restore();
ctx.fillStyle = '#000000';
ctx.fillRect(180,10,150,100);
上面代码先用save要领，保留了当前设置，然后绘制了一个有暗影的矩形。接着，运用restore要领，恢复了保留前的设置，绘制了一个没有暗影的矩形。
4. 动画
应用JavaScript，能够在canvas元素上很轻易地发生动画效果。
var posX = 20,
posY = 100;
setInterval(function() {
context.fillStyle = "black";
context.fillRect(0,0,canvas.width, canvas.height);
posX += 1;
posY += 0.25;
context.beginPath();
context.fillStyle = "white";
context.arc(posX, posY, 10, 0, Math.PI*2, true);
context.closePath();
context.fill();
}, 30);
上面代码会发生一个小圆点，每隔30毫秒就向右下方挪动的效果。setInterval函数的一最先，之所以要将画布从新衬着黑色底色，是为了抹去上一步的小圆点。
经由过程设置圆心坐标，能够发生种种活动轨迹。先上升后下落。
var vx = 10,
vy = -10,
gravity = 1;
setInterval(function() {
posX += vx;
posY += vy;
vy += gravity;
// ...
});
上面代码中，x坐标一直增大，示意延续向右活动。y坐标先变小，然后在重力作用下，不停增大，示意先上升后下落。
小球不停反弹后，逐渐趋于静止。
var vx = 10,
vy = -10,
gravity = 1;
setInterval(function() {
posX += vx;
posY += vy;
if (posY > canvas.height * 0.75) {
vy *= -0.6;
vx *= 0.75;
posY = canvas.height * 0.75;
}
vy += gravity;
// ...
});
上面代码示意，一旦小球的y坐标处于屏幕下方75%的位置，向x轴挪动的速率变成本来的75%，而向y轴反弹上一次反弹高度的40%。
5.像素处置惩罚
经由过程getImageData要领和putImageData要领，能够处置惩罚每一个像素，进而操纵图象内容。
假定filter是一个处置惩罚像素的函数，那末全部对Canvas的处置惩罚流程，能够用下面的代码示意。
if (canvas.width > 0 && canvas.height > 0) {
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
filter(imageData);
context.putImageData(imageData, 0, 0);
}
以下是几种罕见的处置惩罚要领：
灰度效果
灰度图（grayscale）就是取红、绿、蓝三个像素值的算术平均值，这现实大将图象转成了是非情势。假定d[i]是像素数组中一个象素的赤色值，则d[i+1]为绿色值，d[i+2]为蓝色值，d[i+3]就是alpha通道值。转成灰度的算法，就是将红、绿、蓝三个值相加后除以3，再将效果写回数组。
grayscale = function (pixels) {
var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {
var r = d[i];
var g = d[i + 1];
var b = d[i + 2];
d[i] = d[i + 1] = d[i + 2] = (r+g+b)/3;
}
return pixels;
};
复古效果
复古效果（sepia）则是将红、绿、蓝三个像素，离别取这三个值的某种加权平均值，使得图象有一种古旧的效果。
sepia = function (pixels) {
var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {
var r = d[i];
var g = d[i + 1];
var b = d[i + 2];
d[i] = (r * 0.393)+(g * 0.769)+(b * 0.189); // red
d[i + 1] = (r * 0.349)+(g * 0.686)+(b * 0.168); // green
d[i + 2] = (r * 0.272)+(g * 0.534)+(b * 0.131); // blue
}
return pixels;
};
赤色蒙版效果
赤色蒙版指的是，让图象显现一种偏红的效果。算法是将赤色通道设为红、绿、蓝三个值的平均值，而将绿色通道和蓝色通道都设为0。
red = function (pixels) {
var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {
var r = d[i];
var g = d[i + 1];
var b = d[i + 2];
d[i] = (r+g+b)/3; // 赤色通道取平均值
d[i + 1] = d[i + 2] = 0; // 绿色通道和蓝色通道都设为0
}
return pixels;
};
亮度效果
亮度效果（brightness）是指让图象变得更亮或更暗。算法将赤色通道、绿色通道、蓝色通道，同时加上一个正值或负值。
brightness = function (pixels, delta) {
var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {
d[i] += delta; // red
d[i + 1] += delta; // green
d[i + 2] += delta; // blue
}
return pixels;
};
反转效果
反转效果（invert）是指图片显现一种颜色倒置的效果。算法为红、绿、蓝通道都取各自的相反值（255-原值）。
invert = function (pixels) {
var d = pixels.data;
for (var i = 0; i < d.length; i += 4) {
d[i] = 255 - d[i];
d[i+1] = 255 - d[i + 1];
d[i+2] = 255 - d[i + 2];
}
return pixels;
};