如何在畫布上拉伸圖像？

Question

我需要將圖像延伸到畫布的頂部和底部。

我該怎么做？

這是codepen

HTML

<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
</canvas>

JS

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = new Image;
    img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"
    ctx.drawImage(img, 10, 10);
}

Answer 1

drawImage允許您將width和height作為第三個和第四個參數傳遞。 因此，您的最后一行應該是ctx.drawImage(img, 0, 0,c.width, c.height); 為了填滿整個畫布。

Answer 2

這是有關如何填充或適合畫布同時又保持圖像外觀的更詳細的答案。

填充畫布

Answer 3

如果您只想拉伸圖像以填充高度，則可以執行以下jsFiddle這樣的操作： https ://jsfiddle.net/CanvasCode/92ekrbnz/

JavaScript的

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image;
ctx.fillStyle = "#000";
ctx.fillRect(0,0,c.width,c.height);
img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"
img.onload = function () {
    ctx.drawImage(img, (c.width / 2) - (img.width / 2), 0, img.width, c.height);
}

但是，您提供的鏈接基本上只是放大圖像。 因此，您可以執行類似jsFiddle的操作： https ://jsfiddle.net/CanvasCode/92ekrbnz/2/

JavaScript的

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image;

var zoom = 1.0;

img.src = "http://www.w3schools.com/tags/img_the_scream.jpg"

setInterval(function () {
    ctx.fillStyle = "#000";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.drawImage(img, (c.width / 2) - ((img.width * zoom) / 2), (c.height / 2) - ((img.height * zoom) / 2),
    img.width * zoom,
    img.height * zoom);
}, 1);

document.getElementById("zoomIn").onclick = function () {
    zoom += 0.1;
};
document.getElementById("zoomOut").onclick = function () {
    if (zoom > 0.1) {
        zoom -= 0.1;
    }
};