Canvas圖像繪製-6

html部分

      <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1038362097,1230823812&fm=27&gp=0.jpg" alt="柴犬"
        title="開心一下" id="scream" width="100" height="85">
    <canvas id="canvas">
        沒有出現圖形，說明您的瀏覽器不支持 HTML5 canvas 標籤。
    </canvas>

js部分

         // 得到繪製源
        var c = document.getElementById('canvas');
        // 創建畫布，建立二維視角
        var ctx = c.getContext('2d');
        ctx.fillStyle = '#fff';
        // 得到圖像節點
        var img = document.getElementById('scream');
        // 規定繪製區域
        // ctx.fillRect(0,0,200,300);
        // 圖像放在畫布上,drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
        // 圖像節點，剪切的X座標，剪切的Y座標，剪切的圖像寬度，剪切的圖像高度，圖像X軸座標，圖像Y軸軸座標，圖像寬度，圖像高度
        img.onload = function name(params) {
            ctx.drawImage(img, 0, 0 ,100,80);
        }