我正在像这样在画布上绘制图像:
ctx.drawImage(data[i].image, data[i].pos.x, data[i].pos.y, data[i].pos.w, data[i].pos.h);
事实是图片越来越张紧,我不想要这个。如何模拟CSS属性
background-size: cover
在cavas中绘制图像时。
查看100% 100%(我目前拥有的)和cover(我的目标)之间的区别。
100% 100%
cover
获得封面功能有点复杂,尽管这里有一个解决方案:
更新了 以解决特殊情况。另请参阅下面的@Yousef评论。
/** * By Ken Fyrstenberg Nilsen * * drawImageProp(context, image [, x, y, width, height [,offsetX, offsetY]]) * * If image and context are only arguments rectangle will equal canvas */ function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) { if (arguments.length === 2) { x = y = 0; w = ctx.canvas.width; h = ctx.canvas.height; } // default offset is center offsetX = typeof offsetX === "number" ? offsetX : 0.5; offsetY = typeof offsetY === "number" ? offsetY : 0.5; // keep bounds [0.0, 1.0] if (offsetX < 0) offsetX = 0; if (offsetY < 0) offsetY = 0; if (offsetX > 1) offsetX = 1; if (offsetY > 1) offsetY = 1; var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), nw = iw * r, // new prop. width nh = ih * r, // new prop. height cx, cy, cw, ch, ar = 1; // decide which gap to fill if (nw < w) ar = w / nw; if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh; // updated nw *= ar; nh *= ar; // calc source rectangle cw = iw / (nw / w); ch = ih / (nh / h); cx = (iw - cw) * offsetX; cy = (ih - ch) * offsetY; // make sure source rectangle is valid if (cx < 0) cx = 0; if (cy < 0) cy = 0; if (cw > iw) cw = iw; if (ch > ih) ch = ih; // fill image in dest. rectangle ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h); }
现在您可以这样称呼它:
drawImageProp(ctx, image, 0, 0, width, height);
它将按比例缩放图像以适合该容器的内部。
使用最后两个参数偏移图像:
var offsetX = 0.5; // center x var offsetY = 0.5; // center y drawImageProp(ctx, image, 0, 0, width, height, offsetX, offsetY);
希望这可以帮助!