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

【问题标题】：Using JavaScript Math. methods as HTML Canvas .fillRect Co-ordinates使用 JavaScript 数学。方法作为 HTML Canvas .fillRect 坐标
【发布时间】：2017-09-17 21:45:23
【问题描述】：

希望你一切都好！

我整个晚上都在试图弄清楚如何使用 (Math.floor(Math.random()) 作为 HTML 画布元素上使用的 .fillRect 方法的坐标。

我在这个网站和网上寻找了一些答案，但到目前为止没有任何建议有效。我目前的做法是基于this Stack Overflow answer。

每次单击按钮时，我都想在画布上的任意点绘制一个 20*20px 的矩形。除了将我从Math 方法获得的随机数输入到.fillRect 坐标参数之外，我一切正常。

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

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

$("#btn").click(function() {

  var rectCoord = {
    "x": (Math.floor(Math.random() * 699) + 1), //Canvas is 700px wide.
    "y": (Math.floor(Math.random() * 599) + 1), //Canvas is 600px high.
  };


  console.log(rectCoord.x, rectCoord.y)
  //Test. Random X and Y points log in console correctly.

  ctx.fillRect(rectCoord.x, rectCoord.y, 20, 20);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <canvas id="canvas"></canvas>
  <button id="btn">Click!</button>

</div>

console.log 是我测试的地方：

1) “x”和“y”点在每次点击时都是随机的，并且

2) rectCoord.x、rectCoord.y 数据点正确通过，可在以下代码行中使用。

随机点很好地记录到控制台，每当我在fillRect 中为坐标参数输入整数时，它都会完美地绘制一个矩形。

我只是不知道如何在.fillRect 中插入随机点作为参数。为什么它们作为 console.log 的参数而不是 .fillRect 的参数？

非常感谢您的任何回复，我对编码很陌生，我无法理解这个！非常感谢任何帮助！

【问题讨论】：

你试过设置ctx.fillStyle = 'black'或类似的东西吗？
是的，这没什么区别。 fillStyle 在默认情况下无论如何都是黑色的，当我为坐标参数输入数字（例如 40、500）时，代码会正常运行。这就是为什么我认为这与我尝试使用变化的变量作为坐标值有关。 @PatrickRoberts
您应该使用ctx.fillRect((Math.random()*ctx.canvas.width-20) | 0,(Math.random() * ctx.canvas.height -20) | 0, 20, 20); 确保画布上始终出现一个20 x 20的矩形。

标签： javascript jquery html canvas

【解决方案1】：

你必须设置画布大小（也许你在样式表中有）

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

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//creates a function for the random value
function rectCoord(){
  return {
    "x": (Math.floor(Math.random()*699)+1),
    "y": (Math.floor(Math.random()*599)+1)
  }
}
//defines the initial values
var x = 0,//rectCoord().x
    y = 0;//rectCoord().y
//then draw
ctx.fillRect(x, y, 20, 20);
$("#btn").click(function() {
  //in each click delete the previous state
  ctx.clearRect(x, y, 20, 20);
  //renews values
  x = rectCoord().x;
  y = rectCoord().y;
  //renews the position of the drawing
  ctx.fillRect(x, y, 20, 20);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <canvas id="canvas" width="700" height="600"></canvas>
  <button id="btn">Click!</button>
</div>

【讨论】：

唯一重要的是设置画布大小。仅更改会导致正方形始终绘制。如果您在问题演示中单击按钮足够多次，一个正方形将最终呈现，但它落在画布的默认范围内的机会相当低。
啊哈！非常感谢！！所以我在画布标签中添加了宽度和高度属性，这立即解决了这个问题。但是我已经在 css 样式表中有这些值。内联属性和在外部样式表中声明有什么区别？ @PatrickRoberts
@Pete CSS 样式表使画布“像素”“拉伸”以适应屏幕上的 CSS 尺寸，而属性控制画布图像数据中实际包含多少像素。此行为是由于<canvas> 默认使用CSS object-fit: fill; rule。

【解决方案2】：

你绘制的矩形超出画布范围，在<canvas>标签处设置宽高：

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

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

$("#btn").click(function() {

  var rectCoord = {
    "x": (Math.floor(Math.random() * width) + 1),
    "y": (Math.floor(Math.random() * height) + 1)
  };


  console.log(rectCoord.x, rectCoord.y)
  //Test. Random X and Y points log in console correctly.

  ctx.fillRect(rectCoord.x, rectCoord.y, 20, 20);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <button id="btn">Click!</button>
  <canvas id="canvas" width="700" height="600"></canvas>

</div>

【讨论】：