Question

我有一个带有这样一个矩形的HTML画布：

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

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

Answer 1

没有。

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

如果你想在画布中居中某些东西，那么你必须选择正确的位置放置你想要着色的像素。

您可能最好将SVG用于图形，特别是如果它们是简单的形状（如矩形）。

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

请参考pictorial representation

在HTML画布中居中形状

2 个答案: