HTML5 Canvas drawImage图像绘制
?
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坐标的偏移量)的宽度和高度值。
?
/*绘制图片
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);
}
};
}
?
接下来我们来画一个局部特写的图片和一组平铺图片
?
/*局部绘制
这里我们利用宽高可控制缩放
*/
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);
};
}
?
最后我们看一下剪裁图片,剪裁要与路径配合使用,通过路径与图像交叉的形式,调用clip方法剪裁图像。
?
/*图片剪裁
通过路径与图像交叉的形式,调用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";
}
更多信息请查看?java进阶网?http://www.javady.com/index.php/category/thread