1

我有一个问题，我传递给 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();
}

编辑：解决方案：

问题是我没有在画布元素本身上设置宽度和高度。我一开始是用 javascript 设置的，然后是用 css 设置的。这两种方法都导致了缩放问题。当我将高度和宽度放回标签上时，一切都恢复正常。诡异的。

4

1 回答 1

1

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

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

于 2012-12-29T15:16:38.890 回答