Mercurial > defr > drupal > scald > dnd

comparison js/bt/other_libs/excanvas_0002/examples/example1.html @ 18:0d557e6e73f7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added beautytips and some additional event handling code to the library.
author David Eads <eads@chicagotech.org>
date Fri, 06 Mar 2009 14:11:46 -0600
parents
children
comparison
equal deleted inserted replaced
17:1a77f87927dd 18:0d557e6e73f7
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>