Question

我遇到的问题是，我传递给createPattern的图像被放大了2倍以上。我尝试使用：

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();
}

编辑：解决方案：

问题是我没有在canvas元素本身上设置宽度和高度。我首先使用javascript设置它，然后使用css。这两种方法都导致了扩展问题。当我将高度和宽度放回标签时，一切都恢复正常。怪异。

Answer 1

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

如果画布上的所有内容都是您想要的两倍，并且您希望将其缩放到当前大小的一半，则可以使用：contextInQuestion.scale(0.5, 0.5)

HTML Canvas：使用createPattern打印的图像被放大

1 个答案: