- 在 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
