HTML示例：
<canvas id="canvas" style="width:400;height:300"></canvas>
JS示例：
var context = document.getElementById("canvas").getContext("2d");
var img = new Image;
// 獲取圖片地址
img.src = "/background.jpg";
// 開啟跨域支持
img.crossOrigin = "*";
// 開始繪制的橫坐標(biāo)
var x = 0;
// 開始繪制的縱坐標(biāo)
var y = 0;
// 繪制的寬度
var width = 400;
// 繪制的高度
var height = 300;
// 圖片加載完成后執(zhí)行
img.onload = function() {
context.beginPath();
// 繪制圖片
context.drawImage(img, x, y, width, height);
context.closePath();
}
備注：
- 如果變量 width凉馆、height 和 繪制圖片的 寬度薪寓、高度 一樣，那么繪制的圖片是原圖
- 如果變量 width / height 和 繪制圖片的 寬度 / 高度 一樣澜共，但是 width 和 寬度不相等向叉，那繪制的圖片是原圖的 width / 寬度 倍
- 如果變量 width / height 和 繪制圖片的 寬度 / 高度 不一樣，那么繪制的圖片將會變形
