欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

angularjs+ionic+'h5+'实现二维码扫描功能

程序员文章站 2022-06-17 08:02:59
希望大家积极反馈,有不足和更好的方法请大家一起分享和研究,第一次写博客,有描述不清楚的地方,希望大家给我私信,我会努力改正。 ......

               最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效——随着鼠标的移动,会有小球跟随且自动消失的动画

首先,html部分,目前就一个canvas标签。

1 <canvas id="canvas">
2         当前浏览器不支持!
3 </canvas>

其次,css部分,没有考虑美观,大家喜欢的话,可以自己添加样式

1 <style>
2         body{
3             margin: 90px;
4         }
5         #canvas{
6             box-shadow: 0 0 5px;
7         }
8     </style>

最后,看下js实现部分

 1 <script>
 2     const canvas = document.getElementById("canvas");
 3     canvas.height = 600;
 4     canvas.width = 1000;
 5     canvas.style.backgroundColor = "#000";
 6     const ctx = canvas.getContext("2d");
 7 
 8     //小球类
 9     class Ball{
10         constructor(x, y, color){
11             this.x = x;
12             this.y = y;
13             this.color = color;
14             //小球半径默认40
15             this.r = 40;
16         }
17         //绘制小球
18         render(){
19             ctx.save();
20             ctx.beginPath();
21             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
22             ctx.fillStyle = this.color;
23             ctx.fill();
24             ctx.restore();
25         }
26     }
27     //移动小球
28     class MoveBall extends Ball{
29         constructor(x, y, color){
30             super(x, y, color);
31 
32             this.dX = Math.floor(Math.random()*5+1);
33             this.dY = Math.floor(Math.random()*5+1);
34             this.dR = Math.floor(Math.random()*5+1);
35         }
36 
37         upData(){
38             this.x += this.dX;
39             this.y += this.dY;
40             this.r -= this.dR;
41             if(this.r < 0){
42                 this.r = 0;
43             }
44         }
45     }
46 
47     let ballArry = [];
48     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
49 
50     canvas.addEventListener("mousemove",function(e){
51         ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
52     })
53 
54     setInterval(function(){
55         ctx.clearRect(0, 0, canvas.width, canvas.height);
56 
57         for(let i=0;i<ballArry.length;i++){
58             ballArry[i].render();
59             ballArry[i].upData();
60         }
61     },50);
62     </script>

稍作解释下我的设计思路:

首先,获取canvas对象,获取上下文,设置一些基本的属性。(canvas不做过多描述,具体的可以去w3自己研究)。然后,先定义一个Ball的类,里面有小球的圆心坐标位置,以及半径和颜色。在定义一个画小球的方法,具体的画圆实现,不懂的可以去canvas文档自己去看。

在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法,用来改变小球的半径以及颜色属相。

最后,开启一个定时器,当鼠标移动时,把生成的小球存储到数组中,然后遍历循环读取小球,并改变小球的样式,达到最终的效果。

最后附上完整代码。直接拷贝浏览器运行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>会动的小球</title>
 6     <style>
 7         body{
 8             margin: 90px;
 9         }
10         #canvas{
11             box-shadow: 0 0 5px;
12         }
13     </style>
14 </head>
15 <body>
16     <canvas id="canvas">
17         当前浏览器不支持!
18     </canvas>
19     <script>
20     const canvas = document.getElementById("canvas");
21     canvas.height = 600;
22     canvas.width = 1000;
23     canvas.style.backgroundColor = "#000";
24     const ctx = canvas.getContext("2d");
25 
26     //小球类
27     class Ball{
28         constructor(x, y, color){
29             this.x = x;
30             this.y = y;
31             this.color = color;
32             //小球半径默认40
33             this.r = 40;
34         }
35         //绘制小球
36         render(){
37             ctx.save();
38             ctx.beginPath();
39             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
40             ctx.fillStyle = this.color;
41             ctx.fill();
42             ctx.restore();
43         }
44     }
45     //移动小球
46     class MoveBall extends Ball{
47         constructor(x, y, color){
48             super(x, y, color);
49 
50             this.dX = Math.floor(Math.random()*5+1);
51             this.dY = Math.floor(Math.random()*5+1);
52             this.dR = Math.floor(Math.random()*5+1);
53         }
54 
55         upData(){
56             this.x += this.dX;
57             this.y += this.dY;
58             this.r -= this.dR;
59             if(this.r < 0){
60                 this.r = 0;
61             }
62         }
63     }
64 
65     let ballArry = [];
66     let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
67 
68     canvas.addEventListener("mousemove",function(e){
69         ballArry.push(new MoveBall(e.offsetX, e.offsetY,         colorArry[Math.floor(Math.random()*5)]));
70     })
71 
72     setInterval(function(){
73         ctx.clearRect(0, 0, canvas.width, canvas.height);
74 
75         for(let i=0;i<ballArry.length;i++){
76             ballArry[i].render();
77             ballArry[i].upData();
78         }
79     },50);
80     </script>
81 </body>
82 </html>