canvas 加載圖像
加載圖片需要3步:
1.建立image對象.
2.設置image的src
3.image的onload事件，並切在回調中繪製我們的圖像。
例如:
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var image=new Image();
image.src='https://raw.githubusercontent.com/AbdullA-Ababakre/BlogImage/master/Normalization%20process.png';
image.onload=function(){
context.drawImage(image,50,50,50,50);
};
圖像裁剪
前面我們講到如何在 Canvas 中加載各種帥氣酷炫的圖像。但是有時候我們並不需要使用完整的圖像，而只是圖像的一部分內容，這個時候我們就需要使用圖像裁剪。圖像裁剪是圖片 PS 中經常使用到的一種技術，目的是爲了突出我們圖片的某個特定的區域。接下來，讓我們學習如何使用 Canvas 來裁剪我們的圖像。
還是 context.drawImage()
沒錯，你沒看錯，我們還是使用 drawImage 的方法。裁剪是 drawImage 方法的最後一種用法。
context.drawImage(image, source_x, source_y, source_width, source_height, x, y, width, heigh);
它總共涉及9個參數，具體如下：
image：源圖像對象
source_x：源圖像的裁剪區原點橫座標
source_y：源圖像的裁剪區原點縱座標
source_width：源圖像的裁剪區寬度
source_height：源圖像的裁剪區高度
x：在畫布上繪製圖像的原點橫座標
y：在畫布上繪製圖像的原點縱座標
width：在畫布上繪製圖像的寬度
heigh：在畫布上繪製圖像的高度
上面所有參數的看起來可能比較抽象，可以通過結合下面說明圖進行理解：
實例
接下來讓我們嘗試截取圖片的中間部分，如下圖：
相關代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>物體移動</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.src = 'http://coding.imweb.io/img/p3/retina-pixel.jpg';
image.onload = function () {
// 加載圖片後，邊截取圖片且縮放展示在畫布左上角
context.drawImage(image, 260, 260, 480, 480, 0, 0, 240, 240);
}
</script>
</body>
</html>