Mercurial > defr > drupal > scald > dnd

annotate js/bt/other_libs/excanvas_0002/examples/example1.html @ 42:eb7c103b54cb

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