javascript三角函数的使用
我只读了一点三角函数的基本用法. 版本1.0 这是有明显缺陷的.
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
// 绘制雪花
// 清空画布, 来更新
// 如何移动位置?
// 如何进行旋转?
// 雪花的基本参数, 中心坐标, 长度, 角度
// 画布
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// 一个雪花的创建.
var createsnow = (function () {
return function (x,y,deg,r) {
ctx.moveTo(x,y);
// 六个边 怎么画比较好?
// 需要一点数学知识.
// 需要根据 角度和长度把 坐标求出来.
// 读数和弧度单位换算.
// 360 = 2 * Math.PI
// x / 360 = y / 2 / Math.Pi
// 已知 x 求 y
// y = x/180 * Math.Pi
// 我这说的也挺费劲的...
var ddd = deg/180 * Math.PI;
var x1 = x + Math.cos(ddd) * r;
var y1 = y + Math.sin(ddd) * r;
var x2 = x - Math.cos(ddd) * r;
var y2 = y - Math.sin(ddd) * r;
var x3 = x + Math.cos(ddd + (Math.PI/3)) * r;
var y3 = y + Math.sin(ddd + (Math.PI/3)) * r;
var x4 = x - Math.cos(ddd + (Math.PI/3)) * r;
var y4 = y - Math.sin(ddd + (Math.PI/3)) * r;
var x5 = x + Math.cos(ddd - (Math.PI/3)) * r;
var y5 = y + Math.sin(ddd - (Math.PI/3)) * r;
var x6 = x - Math.cos(ddd - (Math.PI/3)) * r;
var y6 = y - Math.sin(ddd - (Math.PI/3)) * r;
// 根据 坐标 画出线条.
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.lineTo(x3,y3);
ctx.lineTo(x4,y4);
ctx.closePath();
ctx.lineTo(x5,y5);
ctx.lineTo(x6,y6);
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();
}
})();
// 让一个雪花完整的动画
// createsnow(100,100,30,30);
function move () {
var x =Math.random() * 500;
var y = 0;
var r = Math.random() * 15 + 5;
var deg = parseInt(Math.random() * 360);
var speedx = Math.random() > 0.5 ? Math.random() * 5 + 2 : - Math.random() * 5 + 2;
var speedy = Math.random() * 5 + 2;
var timer = setInterval(function () {
x += speedx;
y += speedy;
deg++;
ctx.clearRect(0,0,500,500);
createsnow(x,y,deg,r);
if (x < -r || x > 500+r || y > 500 + r) {
clearInterval(timer);
}
},50);
}
move();
// 让多个雪花完整的动画.
setInterval(function () {
move();// 因为每个 move 执行时 都会 clearRect, 所以画面不堪入目
},100)
版本2.0
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewprot" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dddd</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
<style type="text/css">
canvas{
margin: 100px 200px;
border: 1px solid black;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<button onclick="stop()">stop</button>
<button onclick="move()">start</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 一条路径
// 落笔
// 绘制雪花
// 清空画布, 来更新
// 如何移动位置?
// 如何进行旋转?
// 雪花的基本参数, 中心坐标, 长度, 角度
// 画布
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// 一个雪花的创建.
var createsnow = (function () {
return function (x,y,deg,r) {
ctx.moveTo(x,y);
// 六个边 怎么画比较好?
// 需要一点数学知识.
// 需要根据 角度和长度把 坐标求出来.
// 读数和弧度单位换算.
// 360 = 2 * Math.PI
// x / 360 = y / 2 / Math.Pi
// 已知 x 求 y
// y = x/180 * Math.Pi
// 我这说的也挺费劲的...
var ddd = deg/180 * Math.PI;
var x1 = x + Math.cos(ddd) * r;
var y1 = y + Math.sin(ddd) * r;
var x2 = x - Math.cos(ddd) * r;
var y2 = y - Math.sin(ddd) * r;
var x3 = x + Math.cos(ddd + (Math.PI/3)) * r;
var y3 = y + Math.sin(ddd + (Math.PI/3)) * r;
var x4 = x - Math.cos(ddd + (Math.PI/3)) * r;
var y4 = y - Math.sin(ddd + (Math.PI/3)) * r;
var x5 = x + Math.cos(ddd - (Math.PI/3)) * r;
var y5 = y + Math.sin(ddd - (Math.PI/3)) * r;
var x6 = x - Math.cos(ddd - (Math.PI/3)) * r;
var y6 = y - Math.sin(ddd - (Math.PI/3)) * r;
// 根据 坐标 画出线条.
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.lineTo(x3,y3);
ctx.lineTo(x4,y4);
ctx.closePath();
ctx.lineTo(x5,y5);
ctx.lineTo(x6,y6);
ctx.closePath();
ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();
}
})();
// 让一个雪花完整的动画
// createsnow(100,100,30,30);
function SnowData () {
this.init = function () {
this.x =Math.random() * 500;
this.y = 0;
this.r = Math.random() * 15 + 5;
this.deg = parseInt(Math.random() * 360);
this.speedx = Math.random() > 0.5 ? Math.random() * 5 + 2 : - Math.random() * 5 + 2;
this.speedy = Math.random() * 5 + 2;
}
this.render = function () {
this.x += this.speedx;
this.y += this.speedy;
this.deg++;
createsnow(this.x,this.y,this.deg,this.r);
if (this.x < -this.r || this.x > 500+this.r || this.y > 500 + this.r) {
this.init();
}
}
this.init();
createsnow(this.x,this.y,this.deg,this.r);
}
function move () {
// 创建多个雪花
// 使用for循环.
// 清空之后,
// 必须让他们各自按照自己的数据进行更新.
// 所以最好是用面向对象的方式?
// 创建50个雪花
if (!move.flag) {
var snowArr = [];
for(var i = 0; i < 50; i++) {
snowArr.push(new SnowData());
}
move.timer = setInterval(function () {
ctx.clearRect(0,0,500,500);
snowArr.forEach(function (item) {
item.render();
});
},50);
}
}
move();
function stop () {
clearInterval(move.timer);
ctx.clearRect(0,0,500,500);
}
</script>
</body>
</html>
但我想让一开始的时候,不要一下子全都出来, 结束的时候,也不要一下子全部消失. 有点晚了, 我的思路是, 创建雪花时,不要一次创建50个, 而是一次创建5个 每次计时器判断 数组的长度小于50个 就又创建5个
我们在构造函数中,定义另一个render 点击结束按钮时, 启动该render,该render在雪花飘出边界时, 不会从新运行 init() 回到顶边. 而是,修改该对象的一个变量, 比如end? 为 true; 在snowarr 在结束按钮中的循环中,如果发现该 值为true, 则从数组中排除, 当数组长度为0 时, 完全停止计时器.
如果我们重新启动, 则我们在循环时, 给每个end 重新赋值 false;
大概这么个思路.
明天再说.
