Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Ähnlich wie An Impromptu Introduction to HTML5 Canvas
Ähnlich wie An Impromptu Introduction to HTML5 Canvas (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
An Impromptu Introduction to HTML5 Canvas
- 1. An impromptu Barcamp presentation that has something to do with HTML5’s <canvas> element Ben Hodgson @blahpro
- 3. Hello.
- 8. Disclaimer: I don’t really know what I’m talking about
- 10. <canvas> • browser–based 2D drawing • JavaScript API
- 13. var canvas = document.getElementById('canvas_ftw'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(30, 30, 50, 50);
- 14. ctx.clearRect(0, 0, width, height);
- 16. function Particle() { this.radius = 2; this.fill = "#000"; this.x = originX; this.y = originY; this.dx = 0; // px/sec this.dy = 0; // px/sec };
- 18. function simulate() { var now = new Date(), interval = (now - lastSim) / 1000; // loop over every particle in the scene for(var i=0; i < scene.length; i++) { scene[i].advanceSimulationBy(interval); } lastSim = now; };
- 19. scene[i].advanceSimulationBy(interval); • translates each particle according to its x/y velocity • updates the x/y velocity to simulate gravity • tests for collisions with the canvas edge (bouncy bouncy)
- 20. Particle.prototype.draw = function(ctx) { ctx.beginPath(); ctx.fillStyle = this.fill; ctx.arc(this.x, this.y, this.radius, 0, TWO_PI, true); ctx.closePath(); ctx.fill(); };
- 21. (function spawn() { // Make a new particle var p = new Particle(); p.fill = cycleColour(); p.radius = cycleSize(); p.dx = (Math.random() - 0.5) * initialVelocity; p.dy = (Math.random() + 1.0) * initialVelocity / -2; // Add it to the scene scene.push(p); // Do it again in 100ms setTimeout(spawn, 100); // Limit the scene size if(scene.length > maxParticles) { scene.shift(); } })();