canvas 中插入的圖片自適應鋪滿容器

• 在 canvas 中插入圖片，使圖片自適應的充滿布局容器！

HTML

  <canvas id="myCanvas7" width="200" height="200" style="border:1px solid #895;margin-right:20px;margin-bottom:20px;">您的瀏覽器不支持canvas</canvas>

JS

    var c7 = document.getElementById("myCanvas7");
    var cW = c7.offsetWidth;    // 獲取元素寬度
    var cH = c7.offsetHeight;   // 獲取元素高度
    
    var imgObj = new Image();
    imgObj.src = "../../images/1.jpg";
    var imgW = '';
    var imgH = '';
    
    imgObj.onload = function() {
        imgW = imgObj.width;
        imgH = imgObj.height;
        var ctx7 = c7.getContext("2d");
        ctx7.drawImage(this,0,0,cW,imgH*cW/imgW)
    }

效果圖：

另外說一下 canvas 的 drawImage 方法參數

• drawImage函數有三種函數原型：

• drawImage(image, dx, dy)
• drawImage(image, dx, dy, dw, dh)
• drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

• 第一個參數image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作為參數。
• dx和dy是image在canvas中定位的坐標值；
• dw和dh是image在canvas中即將繪制區域（相對dx和dy坐標的偏移量）的寬度和高度值；
• sx和sy是image所要繪制的起始位置;
• sw和sh是image所要繪制區域（相對image的sx和sy坐標的偏移量）的寬度和高度值。