在HTML画布中居中形状

Question

我有一个包含矩形的HTML画布，像这样：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

如何使用CSS将矩形居中在画布上？我想让它始终保持居中，不受画布宽度的影响。

- Salvius

Answer 1

编号。

画布只是一堆像素。没有元素可以受到CSS的影响。

如果您想在画布内部居中某些内容，那么您必须选择正确的位置来放置您首先要着色的像素。

如果您的图形是简单的形状（如矩形），则最好使用SVG。

- Quentin

---

当你调整画布大小时，所有内容都将从画布上清除。因此，当你调整画布大小时，可以在新的居中位置重新绘制矩形。同意关于SVG的说法。由于SVG是实际的DOM元素，所以可以让CSS在调整大小期间重新流动它们。 :-) - markE

Answer 2

在画布上将矩形居中的更简单的方法：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var width = 130, height = 80;//Dimensions of rectangle
var x = canvas.Width/2, y = canvas.Height/2;//Center coordinates of rectangle 
ctx.rect(x - width/2, y - height/2, width, height);
ctx.stroke();

请参考这个图示了解相关的IT技术。

- Jay Rathod