Question

我有一个宽度和高度百分比的画布，我正在那里画一个图像。

我想绘制宽度为50％，画布高度为100％的图像。我该如何做到这一点？

以下是一些代码：

#canvas {
     width: 100%;
     height: 33%;
}

var cv = document.getElementById('canvas');
var cx = cv.getContext('2d');

var bg = document.createElement('img');
bg.src = bg_url;

cx.drawImage(bg, ?, ?, ?, ?);
// cx.drawImage(bg, 0, 0, 50%, 100%); essentially

// now let's draw that second image at 50% of the canvas (tiling)

cx.drawImage(bg, ?, ?, ?, ?);
// cx.drawImage(bg, 50%, 0, 50%, 100%); essentially

Answer 1

canvas.drawImage（）在指定位置和尺寸时使用了哪些单位？

它的所有维度都使用CSS pixels。

此：

#canvas {
     width: 100%;
     height: 33%;
}

只会将画布缩放为图像。画布像素尺寸将保持不变，只会导致较低质量的结果。作为规则，总是在canvas元素上设置绝对大小（如果不这样，无论你用CSS设置什么，大小总是300 x 150像素。）

var canvas = document.getElementById('canvasID');

canvas.width = window.innerWidth;        // use the target size instead if
canvas.height = window.innerHeight * 33; // not the window

然后：

cx.drawImage(bg, 0, 0, canvas.width * 0.5, canvas.height);

canvas.drawImage（）在指定位置和尺寸时使用了哪些单位？

1 个答案: