javascript - Canvas 中的中心图像

Question

我有一个 300x300 的 Canvas 和一个 150x150 的图像。

我怎样才能在这个 Canvas 的中心绘制这个图像。我在 context.translate 和 context.drawImage 中写什么？

这可以在哪些浏览器上运行？

Answer 1

为了便于讨论，让我们假设您的图像是一个矩形。

ctx.fillRect(
             (canvasWidth - width) / 2, 
             (canvasHeight - height) / 2, 
             width, 
             height
            );

jsFiddle .

适用相同形式的计算。