Canvas小结（canvas-图像绘制）

drawImage()方法在画布上绘制图像、画布或视频

drawImage()

![](canvas-images/arrows.jpg)
<canvas id="mycanvas" width="300" height="200">

    var c=document.getElementById("mycanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("arrowsimg");
    //JavaScript 语法 1
    // 在画布上定位图像：
    // context.drawImage(img,x,y);
    // JavaScript 语法 2
    // 在画布上定位图像，并规定图像的宽度和高度：
    // context.drawImage(img,x,y,width,height);
    //JavaScript 语法 3
    //剪切图像，并在画布上定位被剪切的部分：
    //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
    img.onload = function() {
        ctx.drawImage(img,10,10,200,100);
        console.log(img.width);
        console.log(img.height);
    }