1

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

我想用画布的 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
4

1 回答 1

1

canvas.drawImage() 在指定位置和尺寸时使用什么单位？

它CSS pixels用于所有尺寸。

这个：

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

只会将画布缩放为图像。画布像素尺寸将保持不变，只是导致质量较低的结果。作为规则，始终在画布元素上设置绝对大小（如果不这样做，无论您使用 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);
于 2013-10-17T18:59:03.417 回答