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

Display the numbers of an array on html5 canvas

本文关键字：数组 编号 显示 html5      更新时间：2023-09-26

我要做的是制作一个随机数数组（不重复），并在画布上显示这些数字。到目前为止，我所做的是创建数组并将其显示在屏幕上，但不显示在画布上。为了在画布上绘制这些数字中的每一个，我想我需要全局var指向数组索引数字，这样我就可以使用画布的填充方法。这是我的代码：

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 />");
 }

您需要了解画布的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>

相关文章：