|
0
|
1 <!--
|
|
|
2 Copyright 2006 Google Inc.
|
|
|
3
|
|
|
4 Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
5 you may not use this file except in compliance with the License.
|
|
|
6 You may obtain a copy of the License at
|
|
|
7
|
|
|
8 http://www.apache.org/licenses/LICENSE-2.0
|
|
|
9
|
|
|
10 Unless required by applicable law or agreed to in writing, software
|
|
|
11 distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
13 See the License for the specific language governing permissions and
|
|
|
14 limitations under the License.
|
|
|
15 -->
|
|
|
16 <html>
|
|
|
17 <head>
|
|
|
18 <title>ExplorerCanvas Example 1</title>
|
|
|
19 <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
|
20 <script type="text/javascript">
|
|
|
21 var canvas, ctx;
|
|
|
22 var particles = [];
|
|
|
23 var NUM_PARTICLES = 20;
|
|
|
24
|
|
|
25 function Particle() {
|
|
|
26 this.x = Math.random() * canvas.width;
|
|
|
27 this.y = Math.random() * canvas.height;
|
|
|
28
|
|
|
29 this.xvel = Math.random() * 5 - 2.5;
|
|
|
30 this.yvel = Math.random() * 5 - 2.5;
|
|
|
31 }
|
|
|
32
|
|
|
33 Particle.prototype.update = function() {
|
|
|
34 this.x += this.xvel;
|
|
|
35 this.y += this.yvel;
|
|
|
36
|
|
|
37 this.yvel += 0.1;
|
|
|
38
|
|
|
39 if (this.x > canvas.width || this.x < 0) {
|
|
|
40 this.xvel = -this.xvel;
|
|
|
41 }
|
|
|
42
|
|
|
43 if (this.y > canvas.height || this.y < 0) {
|
|
|
44 this.yvel = -this.yvel;
|
|
|
45 }
|
|
|
46 }
|
|
|
47
|
|
|
48 function loop() {
|
|
|
49 ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
50
|
|
|
51 for(var i = 0; i < NUM_PARTICLES; i++) {
|
|
|
52 particles[i].update();
|
|
|
53
|
|
|
54 ctx.beginPath();
|
|
|
55 ctx.moveTo(particles[i].x, particles[i].y);
|
|
|
56 ctx.lineTo(particles[i].x - particles[i].xvel,
|
|
|
57 particles[i].y - particles[i].yvel);
|
|
|
58 ctx.stroke();
|
|
|
59 ctx.closePath();
|
|
|
60 }
|
|
|
61
|
|
|
62 setTimeout(loop, 10);
|
|
|
63 }
|
|
|
64
|
|
|
65 function load() {
|
|
|
66 canvas = document.getElementById("cv");
|
|
|
67 ctx = canvas.getContext("2d");
|
|
|
68
|
|
|
69 for(var i = 0; i < NUM_PARTICLES; i++) {
|
|
|
70 particles[i] = new Particle();
|
|
|
71 }
|
|
|
72
|
|
|
73 ctx.lineWidth = "2";
|
|
|
74 ctx.strokeStyle = "rgb(255, 255, 255)";
|
|
|
75 loop();
|
|
|
76 }
|
|
|
77 </script>
|
|
|
78 <style>
|
|
|
79 body {
|
|
|
80 background-color:black;
|
|
|
81 margin:50px;
|
|
|
82 text-align:center;
|
|
|
83 }
|
|
|
84
|
|
|
85 canvas {
|
|
|
86 border:1px solid #444;
|
|
|
87 }
|
|
|
88 </style>
|
|
|
89 </head>
|
|
|
90 <body onload="load();">
|
|
|
91 <canvas id="cv" width="400" height="300"></canvas>
|
|
|
92 </body>
|
|
|
93 </html> |
