Html5 canvas学习4-图像

把图片或视频放置到画布上, 使用以下方法:

ctx.drawImage(image,x,y)
//完整的参数如下，除了image,x,y其余均是可选
ctx.drawImage( img, clip_x, clip_y, clip_w, clip_h, x, y, width, height );

1.最简单的形式ctx.drawImage(img, x, y)：

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.drawImage(img,30,30);  //在画布坐标（30,30）的位置绘制图片
}
</script>

等图片onload之后才执行绘图代码，防止代码在图片加载到之前就执行。

2.width 和 height 参数来缩放图片：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.drawImage(img,30,30,250,150);  //在画布坐标（30,30）的位置绘制一张宽度为250，高度为150的图片
}

3.裁剪图片

参数 clip_x, clip_y, clip_w, clip_h

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.drawImage(img,10,20,300,300,30,30,250,150);  //在画布坐标（30,30）的位置绘制一张宽度为250、高度150的图片，这种图片是在img上坐标为（10,20）的位置所裁剪出来的宽高均为300的区域
}

注意这里被拉伸的图片已经不再是一开始的那张原始图了，而是原始图在其坐标（10,20）处开始裁剪到的宽高均为300的区域，也就是把这个裁剪到的区域，再伸缩为宽250、高150。

4.clip()方法剪裁

在使用它之前需要绘制一个闭合路径（比如一个rect），使用clip()之后的绘制语句所绘制的对象只能显示被裁剪的区域（就一开始定义的那个闭合路径里的区域，类似PS的蒙板、Flash里的遮罩层）：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(60,60,100,100); //绘制裁剪区域（一个矩形）
ctx.clip(); //设置上一个闭合路径为裁剪蒙板
var img = new Image();
img.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg";
img.onload = function(){
    ctx.drawImage(img,10,20); 
}

更多canvas图像相关的使用方法，暂时不做介绍待以后补充，用到时可以参考：
http://www.cnblogs.com/vajoy/p/3996979.html
https://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html