• Home

• Contact

Silveira Neto

var canvas;
var ctx;
 
var background;
var width = 300;
var height = 200;
 
var cloud;
var cloud_x;
 
function init() {
	canvas = document.getElementById("cloud_demo_canvas");
	width = canvas.width;
	height = canvas.height;
	ctx = canvas.getContext("2d");
 
	// init background 
	background = new Image();
	background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
 
	// init cloud
	cloud = new Image();
	cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
	cloud.onload = function(){
		cloud_x = -cloud.width;
	};
 
	return setInterval(main_loop, 10);
}
 
function update(){
	cloud_x += 0.3;
	if (cloud_x > width ) {
		cloud_x = -cloud.width;
	}
}
 
function draw() {
	ctx.drawImage(background,0,0);
	ctx.drawImage(cloud, cloud_x, 0);
}
 
function main_loop() {
	draw();
	update();
}
 
init();

<canvas id="cloud_demo_canvas" width="640" height="480">Alternative text if browser don't support canvas.</canvas>

1. Fábio Cerqueira 2 June, 2011 at 5:33 pm

   Legal :D Aqui no chrome ficou show!

   Reply
2. Zeh 3 June, 2011 at 10:34 am

   Really simple and functional thanks for this sample

   Reply
3. Marc Bernardo 4 July, 2011 at 12:41 pm

   Parece um jogo de pokémon xD
   Um exemplo bacano ;)

   Reply
4. HTML5 Guy (@html5guy) 14 August, 2011 at 10:03 am

   simple HTML5 animation: clouds over background « Silveira Neto http://t.co/UdKEItx #html5 #animation: simple HTM… http://t.co/57ICGc3

   Reply
5. evilripper 5 September, 2011 at 6:56 pm

   on my firefox 6.0.1 it works fine! :-D
   I wanted to make an animated background for my blog, but maybe it’s too early. :-D

   Reply
6. evilripper 5 September, 2011 at 7:18 pm

   lol there is an error, I’ve seen it with firebug but it is a firefox bug, but exists a workaround:
   http://stackoverflow.com/questions/982000/firefox-throwing-a-exception-with-html-canvas-putimagedata

   Reply
7. Hayk Nahapetyan 12 April, 2012 at 7:36 pm

   I cant make it work, sorry for my question, how do I have to add the code, what tags should I use?

   Reply
8. charles 22 August, 2012 at 11:42 pm

   how would you oscillate the cloud?
   I have been looking for hour and found oscillation animation but not an image like png.

   thanks

   Reply
9. Silveira 30 August, 2012 at 11:12 am

   Hi Charles, you can animate in the same way but instead of updating cloud_x using a constant you could make cloud_x a function of sin or cos over the time.

   Reply
10. robert jones 20 September, 2012 at 10:55 pm

    how would i make the clouds come from the other side

    Reply
11. Diana 4 October, 2012 at 4:50 am

    that is so cool though I tried it give me an error of canvas is null in width= canvas.width;

    another issue I created a cloud using bezier curve I want to animate it but it doesnt work any help please.

    Reply
12. paulomi 28 December, 2012 at 4:35 am

    really good!!
    thanks Silveira

    Reply
13. Jasser 12 March, 2013 at 4:59 pm

    :) funciona de esta manera

    var canvas;
    var ctx;

    var background;
    var width = 300;
    var height = 200;

    var cloud;
    var cloud_x;

    window.onload = function (){
    canvas = document.getElementById(“nubes”);
    console.debug(canvas);
    width = canvas.width;
    height = canvas.height;
    ctx = canvas.getContext(“2d”);

    // init background
    background = new Image();
    background.src = ‘http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';

    // init cloud
    cloud = new Image();
    cloud.src = ‘http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
    cloud.onload = function(){
    cloud_x = -cloud.width;
    };

    return setInterval(main_loop, 10);

    }

    function update(){
    cloud_x += 0.3;
    if (cloud_x > width ) {
    cloud_x = -cloud.width;
    }
    }

    function draw() {
    ctx.drawImage(background,0,0);
    ctx.drawImage(cloud, cloud_x, 0);
    }

    function main_loop() {
    draw();
    update();
    }

    Reply
14. El Aries (@ariestiyansyah) 11 May, 2013 at 3:10 am

    Simple HTML5 animation: clouds over background http://t.co/qv81iDeKpC

    Reply

Copyright © 2013 Silveira Neto | Powered by WordPress and zBench