（五）绘制图像

drawImage() //绘制图像，有9个参数，1要绘制的源图像，2从源图像的x坐标的位置开始绘制，3源图像的y坐标，4要绘制的源图像的宽度（从坐标点开始），5要绘制的源图像的高度，6目标图像的x坐标（绘制在画布上的哪个位置），7目标图像的y坐标，8目标图像的宽度（从坐标点开始绘制多宽），9目标图像的高度

  //第一个参数还可以传入 canvas 元素，即把传入的canvas绘制到当前的画布上就像绘制图像一样

//第一个canvas
    var canvas1 = document.getElementById("canvas1");

    var img = document.images[0];//获得页面图像

    //等图像加载完以后才开始绘制
    img.onload = function(){
        if(canvas1.getContext){
            var ctx1 = canvas1.getContext("2d");

            ctx1.drawImage(img,0,0,200,200,100,100,200,200);//把图像绘制到画布的指定位置

        }

        //第二个 canvas
        var canvas2 = document.getElementById("canvas2");

        if(canvas2.getContext){
            var ctx2 = canvas2.getContext("2d");

            ctx2.drawImage(canvas1,0,0,400,400,0,0,400,400);//把 canvas1绘制到 canvas2上
        }
    }

转载于:https://www.cnblogs.com/chefweb/p/6046471.html