Canvas 画布， 可能对于大多数人都有点陌生，不过，这个真得是一个酷炫的东西，你真的值得拥有，这是我这两天用它的时候产生的一种想法~

这篇文章主要介绍的在Canvas中图片展示。

有没有想到一种场景，关于图片展示的，就像某宝的商品详情页，当鼠标在图片上移动的时候，在旁边的一个区域出现图片的部分区域放大图。

而实现这个的函数就是  drawImage（params_0 --- params_8)

他的参数最多有九个，最少有三个，具体用法自查，比较简单，介绍下9个参数时候具体的参数。

dramImage（image,src_X,src_Y,src_width,src_height,des_X,des_Y,des_width,des_height）

image是一个image对象，使用new Image(),创建的对象，需要制定该对象的src，就是你要处理的图片。

src_X,src_Y 对应的是你image.src指向的图像上的坐标，图像的左上角坐标是（0,0），这两个参数就是相对于原点的坐标。

src_width,src_height是你从你相对原点的位置取得一块区域。

后面那四个参数你可以类比，哦，对了，des_X,des_Y是相对Canvas原点的位置。

然后你就可以开始YY了，其实超简单的，只是你没过度过来。^_^

监听鼠标的事件知道吧，用mousemove监听鼠标在对象上的对应位置（相对位置是算出来的，你可以去瞅瞅怎么算，挺简单的）

然后每次把画布clean了，重画，可以用clearRect这个方法来搞。

大致就介绍到这，你要是有点编程能力或者头脑，应该差不多能搞定吧。

对了 drawImage和clearRect都是基于canvas的绘图环境的：eg: var canvas = document.getElementById("canvas");  var context = canvas.getContext("2d");//基于context的

还是附上代码吧：