整個流程中所用到的主要Canvas API有：
繪制圖像：drawImage()
獲取圖像數(shù)據(jù)：getImageData()
重寫圖像數(shù)據(jù)：putImageData()
導出圖像：toDataURL()
1. 繪制圖像
顧名思義，該方法就是用于將圖像繪制于Canvas畫布當中，具體用法有三種：
① 在畫布上定位圖像：
context.drawImage(img,x,y)
② 在畫布上定位圖像，并規(guī)定圖像的寬度和高度（縮放）：
context.drawImage(img,x,y,width,height)
③ 剪切圖像，并在畫布上定位被剪切的部分：
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的瀏覽器尚不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
window.onload = function(){
canvas.width = 500;
canvas.height =300;
image.src = "./assets/dream.png";
image.onload = function(){//以下幾種應用
//context.drawImage(image,0,0);
context.drawImage(image,0,0,canvas.width,canvas.height);
//context.drawImage(image,600,200,400,400,200,200,400,400);
// context.drawImage(image,600,200,400,400,0,0,canvas.width,canvas.height);
}
}
</script>
</body>
</html>
2.圖像平鋪
drawImage()方法實現(xiàn)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa;">
您的瀏覽器尚不支持canvas
</canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
window.onload = function(){
canvas.width = 800;
canvas.height =500;
image.src = "./assets/dream.png";
image.onload = function(){
// 一定要寫在onload回調(diào)中，否則看不到圖片
//平鋪比例
var scale=3;
//縮小后圖像寬度
var n1=image.width/scale;
//縮小后圖像高度
var n2=image.height/scale;
//平鋪橫向個數(shù)
var n3=canvas.width/n1;
//平鋪縱向個數(shù)
var n4=canvas.height/n2;
for(var i=0;i<n3;i++){
for(var j=0;j<n4;j++){
context.drawImage(image,i*n1,j*n2,n1,n2)
}
}
}
}
</script>
</body>
</html>
效果：
createPattern()方法實現(xiàn)
createPattern() 方法在指定的方向內(nèi)重復指定的元素。元素可以是圖片、視頻，或者其他 <canvas> 元素。被重復的元素可用于繪制/填充矩形、圓形或線條等等。
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script>
function draw(id) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "./assets/logo.png";
image.onload = function(){
//創(chuàng)建填充樣式，全方位平鋪
var ptrn = context.createPattern(image,'repeat');
context.rect(0,0,1500,800);
context.fillStyle = ptrn;
context.fill();
}
}
</script>
<body onload="draw('canvas');">
<canvas id="canvas" width="1500" height="800" />
</body>
</html>
效果：
3.圖像剪裁
使用圖形上下文不帶參數(shù)的clip()方法來實現(xiàn)Canvas圖形裁切功能，該方法會使用先創(chuàng)建好的路徑對canvas設(shè)置裁剪區(qū)域，裁剪指定區(qū)域顯示內(nèi)容。裁剪是對畫布進行的，裁剪后的畫布是不能恢復到原來的大小，因此使用save及restore。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>裁剪區(qū)域</title>
<style>
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個吧！！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
//在屏幕上繪制一個大方塊
context.fillStyle = "black";
context.fillRect(10,10,200,200);
context.save();
context.beginPath();
//裁剪畫布從(0，0)點至(50，50)的正方形
context.rect(0,0,50,50);
context.clip();
//紅色圓
context.beginPath();
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(100,100,100,0,Math.PI * 2,false);
//整圓
context.stroke();
context.closePath();
context.restore();
};
</script>
</body>
</html>
效果：
4.像素處理
我們可以直接從HTML5 canvas中獲取單個像素。通過ImageData對象我們可以以讀寫一個數(shù)據(jù)數(shù)組的方式來操縱像素數(shù)據(jù)。當完成像素操作之后，如果要顯示它們，需要將這些像素復制到canvas上。
創(chuàng)建一個ImageData對象
var imageData = context.createImageData(width, height);
ImageData對象代表canvas中某個區(qū)域的底層像素數(shù)據(jù)。它包含三個只讀的屬性：
width：圖像的寬度，單位像素。
height：圖像的高度，單位像素。
data：包含像素值的一維數(shù)組。
在data數(shù)組中的每一個像素包含4個字節(jié)的值。也就是說每一個像素由4個字節(jié)表示，每一個字節(jié)分別表示紅色，綠色，藍色和一個透明度alpha通道（RGBA）。
復制像素到canvas上
var canvasX = 25;
var canvasY = 25;
context.putImageData(imageData, canvasX, canvasY);
putImageData()函數(shù)將它們復制到canvas上。putImageData()函數(shù)有兩種格式。第一種格式是復制所有的像素到canvas中。canvasX和canvasY參數(shù)是canvas上插入像素的x和y坐標。
context.putImageData(imageData, canvasX, canvasY,
sx, sy, sWidth, sHeight);
sx和sy參數(shù)（sourceX 和 sourceY）是矩形左上角的x和y坐標。
sWidth和sHeight參數(shù)（sourceWidth 和 sourceHeight）是矩形的寬度和高度。
從canvas中獲取像素
我們也可以從canvas上獲取一個矩形區(qū)域的像素到一個ImageData對象中。通過getImageData函數(shù)可以完成這個操作。
var imageData2 = context.getImageData(x, y, width, height);
x和y參數(shù)是從canvas上獲取的矩形的左上角的坐標。
width和height參數(shù)是從canvas上獲取的矩形的寬度和高度。
5.繪制文字
我們可以在HTML5 canvas上繪制繪制文字，并且可以設(shè)置文字的字體，大小和顏色。
繪制文字的字體由font屬性來控制。如果你需要使用顏色來填充文字或制作描邊文字，可以使用fillStyle和strokeStyle屬性來完成。
要在canvas上繪制文字，可以通過的fillText()函數(shù)或strokeText()函數(shù)來完成。
fillText(text, x, y, [maxWidth])
strokeText(text, x, y, [maxWidth])
表示在(x,y)的位置，繪制text的內(nèi)容?？蛇x參數(shù)maxWidth為文本的最大寬度，單位為像素。如果設(shè)置了該屬性，當文本內(nèi)容寬度超過該參數(shù)值，則會自動按比例縮小字體，使文本的內(nèi)容全部可見；未超過時，則以實際寬度顯示。如果未設(shè)置該屬性，當文本內(nèi)容寬度超過畫布寬度時，超出的內(nèi)容將被隱藏。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>裁剪區(qū)域</title>
</head>
<canvas id="canvas" width="1500" height="800" />
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.font = "normal 36px Verdana";
context.fillStyle = "#000000";
context.fillText("HTML5 Canvas Text", 50, 50);
context.font = "normal 36px Arial";
context.strokeStyle = "#000000";
context.strokeText("HTML5 Canvas Text", 50, 90);
</script>
</html>
效果：
