使用JavaScript数学。方法作为HTML Canvas.fillRect坐标

希望你们都好

我花了整整一个晚上试图找出如何使用

（Math.floor（Math.random（））

作为HTML画布元素上使用的

.fillRect

方法的坐标

我已经在这个网站和网上搜索了一些答案，但到目前为止没有任何建议有效。我目前的方法是基于

每次单击按钮时，我想在画布上的一个随机点上绘制一个20*20px的矩形。除了将从

Math

方法获得的随机数字输入

。fillRect

坐标参数之外，我的一切都正常工作

这是我的HTML代码和JS代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
$（“#btn”）。单击（函数（）{
var rectCoord={
“x”：（Math.floor（Math.random（）*699）+1），//画布的宽度为700px。
“y”：（Math.floor（Math.random（）*599）+1），//画布的高度为600px。
};
log（rectCoord.x，rectCoord.y）
//测试。随机X点和Y点正确登录控制台。
ctx.fillRect（rectCoord.x，rectCoord.y，20,20）；
})；

点击

您必须输入画布大小（可能在样式表中有）

然后简单地删除旧位置并更新它

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//为随机值创建一个函数
函数rectCoord（）{
返回{
“x”：（Math.floor（Math.random（）*699）+1），
“y”：（Math.floor（Math.random（）*599）+1）
}
}
//定义初始值
var x=0，//rectCoord（）.x
y=0；//rectCoord（）.y
//然后画
ctx.fillRect（x，y，20，20）；
$（“#btn”）。单击（函数（）{
//在每次单击中，删除以前的状态
ctx.clearRect（x，y，20，20）；
//更新价值观
x=rectCoord（）.x；
y=rectCoord（）.y；
//更新图形的位置
ctx.fillRect（x，y，20，20）；
})；

点击

您绘制的矩形超出画布范围，请将宽度和高度设置为

标记：

<canvas id="canvas" width="700" height="600"></canvas>

点击

你试过设置

ctx.fillStyle='black'

或类似的东西吗？是的，这没有什么区别。

fillStyle

在默认情况下是黑色的，当我输入数字时（例如40500）对于坐标参数，代码按其应该的方式运行。这就是为什么我认为这与我试图使用一个变化的变量作为坐标值有关。@PatrickRoberts您应该使用

ctx.fillRect（（Math.random（）*ctx.canvas.width-20）| 0，（Math.random（）*ctx.canvas.height-20）|0,20,20）

确保20 x 20的矩形始终出现在画布上。唯一需要注意的是设置画布的大小。仅进行更改会导致正方形始终绘制。如果您在问题演示中单击按钮足够多次，正方形最终将渲染，但其落入defa范围的可能性相当低ult画布边界。啊哈！非常感谢！！因此我在画布标记中添加了宽度和高度属性，这立即解决了问题。但是我在css样式表中已经有了这些值。内联属性和在外部样式表中声明有什么区别@PatrickRoberts@PeteCSS样式表导致canv作为“像素”以“拉伸”以适应屏幕上的CSS尺寸，而属性控制画布图像数据中实际包含的像素数。此行为是由于默认情况下使用了

。