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坐标的偏移量）的宽度和高度值。
*/
functiondrawImage(){
Ca();
varcanvas=draw();
varimage=newImage();
image.src="_image.png";
image.onload=function(){
for(vari=0;i<5;i++){
canvas.drawImage(image,i*50,i*25,379,80);
}
};
}接下来我们来画一个局部特写的图片和一组平铺图片
/*局部绘制
这里我们利用宽高可控制缩放
*/
functiondrawImageArea(){
Ca();
varcanvas=draw();
varimage=newImage();
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：整体平铺
*/
functiondrawImagePingPu(){
Ca();
varcanvas=draw();
varimage=newImage();
image.src="_image.png";
image.onload=function(){
varpp=canvas.createPattern(image,'repeat');
canvas.fillStyle=pp;
canvas.fillRect(0,0,wh.width,wh.height);
};
}最后我们看一下剪裁图片，剪裁要与路径配合使用，通过路径与图像交叉的形式，调用clip方法剪裁图像。
/*图片剪裁
通过路径与图像交叉的形式，调用clip方法剪裁图像
*/
functiondrawImageClip(){
Ca();
varcanvas=draw();
varimage=newImage();
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