一、canvas图像

canvas更有意思的一项特性就是图像操作能力。用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

引入图像到canvas里需要以下两步基本操作：

获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源
也可以通过提供一个URL的方式来使用图片

使用drawImage()函数将图片绘制到画布上

二、绘制图片

drawImage 方法有三种形态。

(1)把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)
image 是 image 或者 canvas 对象，x 和 y 是 canvas 里的起始坐标。

示例1：

image.png

<body>
<img id="demo" src="../img/a5.png" alt="demo" width="300" height="200">
<canvas id="cava1" width="300" height="200"></canvas>
</body>
<script> 
    function draw() {
         var canvas=document.getElementById("cava1");
         var ctx=canvas.getContext("2d");  
         //把一幅图像放置到画布上
         var img=document.getElementById("demo");
         img.onload = function() {
            ctx.drawImage(img,10,10);
        }
    } 
    draw();

（2）缩放 Scaling
drawImage 方法的第二种形态是增加了两个用于控制图像在 canvas 中缩放的参数。

drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制当向canvas画入时应该缩放的大小

注意：图像可能会因为大幅度的缩放而变得起杂点或者模糊。
如果图像里面有文字，那么最好不要进行缩放，因为那样处理之后很可能图像里的文字就会变得无法辨认了。

示例2：

image.png

<body>
<canvas id="cava1" width="300" height="150"></canvas>
</body>
<script> 
    function draw() {
         var canvas=document.getElementById("cava1");
         var ctx=canvas.getContext("2d");  
        //图片缩放
        var img = new Image();
        img.onload = function(){
            for (var i=0;i<4;i++){
                for (var j=0;j<3;j++){
                    ctx.drawImage(img,j*60,i*50,60,50);
                }
            }
        };
        img.src = '../img/a9.jpg';
    } 
    draw(); 
</script>

（3）切片 Slicing
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

image.png

示例3：

image.png

<body>
<p>Image to use:</p>
<img id="demo" src="../img/a5.png" alt="demo" width="300" height="200">
<p>Canvas:</p>
<canvas id="cava1" width="300" height="200"></canvas>
</body>
<script> 
    function draw() {
         var canvas=document.getElementById("cava1");
         var ctx=canvas.getContext("2d");  
         //切片 
         var img = document.getElementById("demo");
         img.onload = function () {
            ctx.drawImage(img, 33, 71, 104, 124, 21, 20, 87, 104);
        }
    } 
    draw(); 
</script>

其它文章请访问：

参考：路径-CanvasAPI|MDN