在 html 画布上，我尝试在特定点绘制一个正方形，但如果 x 和 y 不同，它会膨胀和扭曲

Question

我处理了变量(在+和-之间转换等(，但无论我做什么，它总是在拨号。

var c = document.getElementById("mycanvas").getContext("2d");
c.fillStyle = "blue";
c.fillRect (0,0,500,350);
function square(x,y) {
var leftX = (x - 10)
var leftY = (y - 10)
var rightX = (x + 10)
var rightY = (y + 10)
c.fillStyle = "red";
c.fillRect (leftX,leftY,rightX,rightY)
}
square(40,20);

<canvas id="mycanvas" width="1000" height="1000"></canvas>

Answer 1

fillRect函数使用如下参数：void ctx.fillRect(x, y, width, height);

因此，在您的情况下，您使用40和20调用square函数，它将(根据您的函数(转换为坐标x=30和y=10，宽度为50，高度为30。

var c = document.getElementById("mycanvas").getContext("2d");
c.fillStyle = "blue";
c.fillRect (0,0,500,350);
function square(x,y) {
var leftX = (x - 10); // x = 30
var leftY = (y - 10); // y = 10
var width = (x + 10); // width = 50
var height = (y + 10); // height = 30
c.fillStyle = "red";
c.fillRect (leftX,leftY,width,height);
}
square(40,20);

<canvas id="mycanvas" width="1000" height="1000"></canvas>

如果你想要一个正方形，你应该这样做：

var c = document.getElementById("mycanvas").getContext("2d");
c.fillStyle = "blue";
c.fillRect (0,0,500,350);
function square(x,y) {
var leftX = (x - 10); // x = 30
var leftY = (y - 10); // y = 10
c.fillStyle = "red";
c.fillRect (leftX,leftY,20,20);
}
square(40,20);

<canvas id="mycanvas" width="1000" height="1000"></canvas>