基于canvas的demo

Author Avatar
lixuebing 11月 04, 2016

真的么

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
	<html lang="en">				
	<head>				
    	<meta charset="UTF-8">
		<title>Title</title>
    		<style>
        	*{
          	 	margin:0;
            	padding:0;
        	}
        	canvas{
            	display: block;
            	margin:0 auto;
            	border:1px red solid;
            	background-image:radial-gradient(80% 80%,red 20% , orange 50%, 	yellow 70% , green 80% ,purple 95% );
        	}
    	</style>
		</head>
		<body>
 			<span>这里是采用构造函数------类的概念写出来的球球大作战</span>
    		<canvas id="canvas">
        		xxxxx
    		</canvas>
    	<script>
   		 // 1.搭建环境
        	var canvas = document.querySelector("#canvas");
        	canvas.width = 800;
        	canvas.height = 600;
    	// 2.先设置一个开关
        	var onOff = false;
       	 var ctx = canvas.getContext("2d");
        // 构造一个函数
        function Arc(){
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = color;
            this.speedX = speedX;
            this.speedY = speedY;
// //3执行函数内部代码------new做了哪些事情
// console.log("3");
// //1
// var obj = new Object();
// //2
// obj.x = this.x;
// obj.y = this.y;
// obj.r = this.r;
// //4
// return obj;
        }
        // 绘制一个球球
        Arc.prototype.drawArc = function(){
            ctx.save();
            ctx.beginPath();
            ctx.fillStyle = this.color;
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2)
            ctx.fill();
            ctx.closePath();
            ctx.restore();
        }
        // 判断，出界的时候，反向减数值
        Arc.prototype.move = function(){
            if(this.x+this.speedX+this.r > canvas.width || this.x+this.speedX-this.r < 0){
                this.speedX = -this.speedX;
            }
            if(this.y+this.speedY+this.r > canvas.height || this.y+this.speedY-this.r < 0){
                this.speedY = - this.speedY;
            }
            this.x += this.speedX;
            this.y += this.speedY;
        }
        var arr = [];
        // 定义一个空数组
        for(let i = 0;i<100;i++){
           var x = random(50,750);
           var y = random(50,550);
           var r = random(10,30);
           var speedX = random(3,10);
           var speedY = random(3,10);
           // ES6的写法
           var color = `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`;
// var color = "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
           var obj = new Arc(x,y,r,color,speedX,speedY)
            arr.push(obj);
        }
        var timer = null;
        function ani(){
            // 清除画布
            ctx.clearRect(0,0,canvas.width,canvas.height)
            for(let i = 0;i<arr.length;i++){
                arr[i].drawArc();
                arr[i].move();
            }
            timer = window.requestAnimationFrame(ani);
        }
        ani();
        document.onclick = function(){
            onOff = !onOff;
            if(onOff){
                window.cancelAnimationFrame(timer);
            }else{
                ani();
            }
        }
        function random(a,b){
            return Math.ceil(Math.random() * (b-a)+a+1);
        }
    </script>
</body>
</html>
expand_less