HTML画布:用createPattern打印的图像被放大

HTML Canvas: images printed with createPattern are zoomed in

本文关键字：图像 放大 打印 createPattern 画布 HTML      更新时间：2023-09-26

我有一个问题，我传递给createPattern的任何图像都放大了超过2x。我试着使用:

contextInQuesiton.scale(1,1)

但是图像仍然在我的明确指示下放大。

任何想法?

代码如下所示

app.canvas = document.getElementById('thecanvas');
app.context = app.canvas.getContext('2d');
var bgImg  = new Image();
bgImg.src  = 'bg.png';
bgImg.onload = function() {
    var bgDraw = app.context.createPattern(bgImg, 'repeat-y');
    app.context.rect(0, 0, 1000, 600);
    app.context.fillStyle = bgDraw;
    app.context.fill();
}

编辑:解决方案:

问题是，我没有设置画布元素本身的宽度和高度。我一开始是用javascript设置的，然后是css。这两种方法都会导致缩放问题。当我把高度和宽度的标签，一切都恢复正常。奇怪。

contextInQuestion.scale(1, 1)不做任何事情。它将画布上的所有点映射到它们的当前位置，这没有任何可见的效果。

如果画布上的所有东西都是你想要的两倍大，并且你想将其缩放到当前大小的一半，你可以使用:contextInQuestion.scale(0.5, 0.5)

相关文章：