无法调用 Canvas' drawImage

Question

我在使用 HTML 5 的 Canvas' drawImage 函数时遇到问题。

具体来说，不是将图像绘制到我在CSS中指定的宽度和高度.. 而是, 它完全忽略了这个 CSS' 宽度、高度和绘图到我的绘图应用程序中指定的图像原始（大得多）尺寸。

HTML

<canvas id="gameBoard">
<img id="gamePaddle" src="images/paddle.gif" alt="paddle" />
</canvas>

JS

var canvas = document.getElementById("gameBoard");
var ctx = canvas.getContext("2d");
var myPaddle = document.getElementById("gamePaddle");
var paddleX = (canvas.width -  myPaddle.width ) / 2;
var paddleY = (canvas.height - myPaddle.height) / 2;

ctx.drawImage(myPaddle, paddleX, paddleY);

CSS

#gamePaddle {
    display: block;
    
    /* original size = 329px, 332px */
    width:  18px;
    height: 18px;   
}

#gameBoard {
    width:  100%;
    height: auto;
}

不胜感激！

Answer 1

如果您查看 drawImage 的文档，您会发现在绘制到 canvas 时不能使用类似这样的东西来调整大小：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#understanding_source_element_size

幸运的是，您还会看到您可以在绘制图像时指定所绘制图像的大小：

ctx.drawImage(myPaddle, paddleX, paddleY, 18, 18); // <-- using your 18 measurement from css

无法调用 Canvas' drawImage

Having difficulty with calling Canvas' drawImage

html5-canvas