Canvas 学习3 (星星移动)

星星移动

    /** @type {HTMLCanvasElement} */
      var canvas = document.getElementById("tutorial");
      var ctx = canvas.getContext("2d"); //获得画笔
      //设置canvas的宽高为可视宽高
      canvas.width = document.documentElement.clientWidth;
      canvas.height = document.documentElement.clientHeight;
      //画一个星星 ---- 白色实心圆点
      // 随机XY坐标
      var x = parseInt(Math.random() * canvas.width);
      var y = parseInt(Math.random() * canvas.height);
      //设置星星的速度  随机速度  最小速度1

      var speed_x =
        1 +
        parseInt(Math.random() * 3) *
          Math.pow(-1, parseInt(Math.random() * 10));
      var speed_y =
        1 +
        parseInt(Math.random() * 3) *
          Math.pow(-1, parseInt(Math.random() * 10));

      /*
        让星星随机移动 ---- （改变星星的圆心坐标）
        重新绘制圆
      */
      setInterval(() => {
        //先清除之前绘制的星星   当前页面可视框内的所有星星
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        x += speed_x;
        y += speed_y;
        //边界判断
        speed_x = x < 0 || x > canvas.width ? -speed_x : speed_x;
        speed_y = y < 0 || y > canvas.height ? -speed_y : speed_y;
        //重新绘制星星
        circle(x, y);
      }, 100);

      //设置填充色
      ctx.fillStyle = "#fff";
      circle(x, y);
      // 画圆封装成函数
      function circle(x, y) {
        var r = 1;
        //画圆
        ctx.beginPath();
        ctx.arc(x, y, r, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
      }

效果：