在HTML画布中居中形状

我有一个带有如下矩形的HTML画布：

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

是否可以使用css在画布中居中放置该矩形？无论画布的宽度是多少，我都希望它保持居中。

否

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

如果你想在画布中居中，那么你必须选择正确的位置，把你正在着色的像素放在第一位

---

您最好在图形中使用SVG，特别是当它们是简单的形状（如矩形）时

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

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

---

调整画布大小时，所有内容都将从画布上清除。因此，在调整画布大小时，只需在新居中的位置重新绘制矩形。同意SVG。因为SVG是实际的DOM元素，所以可以让CSS在调整大小时回流它们。：-）