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)
    }

效果图：

image.png

另外说一下 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坐标的偏移量）的宽度和高度值。

image.png