Question

所以我在网站上有一个横幅，但我希望这样做，以便每次加载页面时，都会显示不同的图像。更准确地说，我想要（例如50个）随机大小（比如从5像素到20像素大小）的正方形（比如说有一个黑色边框，白色填充），在750x63像素帧的随机位置，白色背景。

最好的方法是什么？我知道一点JavaScript和HTML（我非常愿意学习更多），但我真的不知道从哪里开始。这是我的个人网页，我想稍微修改一下。现在，我拥有的最高级代码是一个简单的Lightbox界面的JavaScript。

Answer 1

哇，这比我想象的更容易也更有趣。这是代码，位于我的HTML代码的<body>部分，针对750x80像素的帧进行了优化。我从this other question得到的随机整数生成器。

<canvas id="canvas" width="750" height="80"></canvas>
<script type="text/javascript">
  //Random integer generator
  function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    //Loop to make 80 squares
    for (var i=0;i<80;i++) {
      //The x-position of the square, with 5px padding in frame
      var sx = getRandomInt(5,705);
      //The y-position of the square, with 5px padding in frame
      var sy = getRandomInt(5,35);
      //The height of the square, smallest 8x8px, largest 40x40px
      var sh = getRandomInt(8,40);
      //First, create a black square
      ctx.fillStyle = "rgb(0,0,0)";
      ctx.fillRect (sx, sy, sh, sh);
      //Second, create a white square that's 4px shorter and thinner,
      //leaving a boundary of 2px
      ctx.fillStyle = "rgb(255,255,255)";
      ctx.fillRect (sx+2, sy+2, sh-4, sh-4);
    }
  } 

  draw();
</script>

我使用的方法来自a Mozilla Developers page。结果是这样的：

the result

万岁！

在每个页面重新加载/刷新时生成具有特定内容的随机图像

1 个答案: