如何根据随机尺寸绘制正方形并显示尺寸

Question

我想绘制一个随机大小的正方形，但我不知道如何使用 Javascript 来做到这一点。我想知道如何在 html 页

的文本框中显示随机大小

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

Javascript

 <script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.rect(188, 50, 200, 100);
  context.fillStyle = 'yellow';
  context.fill();
  context.lineWidth = 7;
  context.strokeStyle = 'black';
  context.stroke();
</script>

这将绘制一个填充矩形，但我希望它是正方形，大小随机

Answer 1

你可以使用

HTML:

   <input type="text" id="size"></input>
   <canvas id="myCanvas" width="578" height="200"></canvas>

JS:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var min = 10;
var max = 50;
var size = Math.floor(Math.random() * (max - min + 1) + min)

document.getElementById("size").value = size; //this will print random dimension in text input #size

context.beginPath();
context.rect(0, 0, size, size);
context.fillStyle = 'yellow';
context.fill();
//context.lineWidth = 7;
//context.strokeStyle = 'black';
//context.stroke();                  --I've commented it out to make it more clear - you can uncomment it

绘制尺寸从 min 到 max 的正方形。这个总是从 i (0,0) 开始，但你也可以随机开始。

尺寸会在输入中显示

您可以在这里尝试：http://jsfiddle.net/615eodon/

如何根据随机尺寸绘制正方形并显示尺寸

How to draw square based on a random dimension and display the size

html

javascript

html5-canvas