Canvas 学习3 (星星移动)

星星移动
 1     /** @type {HTMLCanvasElement} */
 2       var canvas = document.getElementById("tutorial");
 3       var ctx = canvas.getContext("2d"); //获得画笔
 4       //设置canvas的宽高为可视宽高
 5       canvas.width = document.documentElement.clientWidth;
 6       canvas.height = document.documentElement.clientHeight;
 7       //画一个星星 ---- 白色实心圆点
 8       // 随机XY坐标
 9       var x = parseInt(Math.random() * canvas.width);
10       var y = parseInt(Math.random() * canvas.height);
11       //设置星星的速度  随机速度  最小速度1
12 
13       var speed_x =
14         1 +
15         parseInt(Math.random() * 3) *
16           Math.pow(-1, parseInt(Math.random() * 10));
17       var speed_y =
18         1 +
19         parseInt(Math.random() * 3) *
20           Math.pow(-1, parseInt(Math.random() * 10));
21 
22       /*
23         让星星随机移动 ---- （改变星星的圆心坐标）
24         重新绘制圆
25       */
26       setInterval(() => {
27         //先清除之前绘制的星星   当前页面可视框内的所有星星
28         ctx.clearRect(0, 0, canvas.width, canvas.height);
29 
30         x += speed_x;
31         y += speed_y;
32         //边界判断
33         speed_x = x < 0 || x > canvas.width ? -speed_x : speed_x;
34         speed_y = y < 0 || y > canvas.height ? -speed_y : speed_y;
35         //重新绘制星星
36         circle(x, y);
37       }, 100);
38 
39       //设置填充色
40       ctx.fillStyle = "#fff";
41       circle(x, y);
42       // 画圆封装成函数
43       function circle(x, y) {
44         var r = 1;
45         //画圆
46         ctx.beginPath();
47         ctx.arc(x, y, r, Math.PI * 2);
48         ctx.closePath();
49         ctx.fill();
50       }
效果：