标签：星星 Canvas ctx canvas 学习 var speed Math

星星移动

 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       }

效果：

标签：星星,Canvas,ctx,canvas,学习,var,speed,Math
来源： https://www.cnblogs.com/qjh0208/p/13814464.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。