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]

感谢大家关注前端攻城记