Question

我尝试做的是制作一组随机数（无重复数字）并在画布上显示这些数字。到目前为止我所做的是创建数组并在屏幕上显示它们但不在画布上。为了在画布上绘制这些数字中的每一个，我假设我需要指向数组索引数字的全局变量，以便我可以使用画布的填充方法。这是我的代码：

function fillArrayRandomNumbers(arr, max ){
for (var i = 0 ; i < arr.length ; i++ )
{
   arr[i] = Math.floor(Math.random()*max + 1); 
}
 return arr;
}
function displayArray(arr)
{
  document.write("<br />");
  for (var i = 0 ; i < arr.length ; i++ )
  {
    document.write("Element[" + i +"] = " + arr[i] + "<br />");
  }
  document.write("<br />");
 }

Answer 1

您想要查看画布的fillText方法。请参阅以下代码以供参考：

function fillArrayRandomNumbers(arr, max) {
  for (var i = 0; i < arr.length; i++) {
    arr[i] = Math.floor(Math.random() * max + 1);
  }
  console.log(arr)
  return arr;
}

function displayArray(arr) {
  canvas = document.getElementById("myCanvas")
  var context = canvas.getContext("2d")
  context.font = "20px Georgia";
  console.log(arr.length)
  for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    context.fillText(arr[i], i * 30, 50);//Be smarter here to control where text displays

  }
}

var new_array = Array(10)
new_array = fillArrayRandomNumbers(new_array, 10)
displayArray(new_array)

<canvas id="myCanvas" width="400" height="100" style="border:1px solid #000000;">
</canvas>

在html5画布上显示数组的编号

1 个答案: