HTML5 Canvas drawImage圖像繪制

歡迎來到前端攻城記。

今天我們來看一下繪制圖片。

demo在此！

HTML5中引入新的元素canvas，其drawImage 方法允許在 canvas 中插入其他圖像( img 和 canvas 元素) 。drawImage函數有三種函數原型：

語法：

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

*第一個參數image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作為參數。
*dx、dy是image在canvas中定位的坐標值；
*dw、dh是image在canvas中即將繪制區域（相對dx和dy坐標的偏移量）的寬度和高度值；
*sx、sy是image所要繪制的起始位置；
*sw、sh是image所要繪制區域（相對image的sx和sy坐標的偏移量）的寬度和高度值。

[javascript]

/*繪制圖片
drawImage(x,y);
HTML5中引入新的元素canvas，其drawImage 方法允許在 canvas 中插入其他圖像( img 和 canvas 元素) 。drawImage函數有三種函數原型：

drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

*第一個參數image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作為參數。
*dx、dy是image在canvas中定位的坐標值；
*dw、dh是image在canvas中即將繪制區域（相對dx和dy坐標的偏移量）的寬度和高度值；
*sx、sy是image所要繪制的起始位置；
*sw、sh是image所要繪制區域（相對image的sx和sy坐標的偏移量）的寬度和高度值。
*/
function drawImage() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
for (var i = 0; i < 5; i++) {
canvas.drawImage(image, i * 50, i * 25, 379, 80);
}
};
}

[/javascript]

接下來我們來畫一個局部特寫的圖片和一組平鋪圖片

[javascript]

/*局部繪制
這里我們利用寬高可控制縮放
*/
function drawImageArea() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
canvas.drawImage(image, 180, 20, 100, 60, 50, 25, 379, 80);
};
}
/*圖片
createPattern 可以實現平鋪圖片
createPattern(image,type)
image為要平鋪的圖像
type分為：
no-repeat:不平鋪
repeat-x:橫向平鋪
repeat-y：縱向平鋪
repeat：整體平鋪
*/
function drawImagePingPu() {
Ca();
var canvas = draw();
var image = new Image();
image.src = "_image.png";
image.onload = function () {
var pp = canvas.createPattern(image, 'repeat');
canvas.fillStyle = pp;
canvas.fillRect(0, 0, wh.width, wh.height);
};
}

[/javascript]

最后我們看一下剪裁圖片，剪裁要與路徑配合使用，通過路徑與圖像交叉的形式，調用clip方法剪裁圖像。

[javascript]

/*圖片剪裁
通過路徑與圖像交叉的形式，調用clip方法剪裁圖像
*/
function drawImageClip() {
Ca();
var canvas = draw();
var image = new Image();
canvas.save();//保存當前畫布
image.onload = function () {
canvas.beginPath();
canvas.arc(220, 100, 100, 0, 2 * Math.PI, true);//創建圓形剪裁路徑
canvas.clip();//剪裁
canvas.drawImage(image, 180, 20, 100, 60, 50, 25, 379, 80);
};
image.src = "_image.png";

}

[/javascript]

感謝大家關注前端攻城記