Click here to Skip to main content
15,868,019 members
Articles / Web Development / HTML
Tip/Trick

HTML5 Snow Canvas

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
27 Apr 2012Ms-PL 26.4K   500   10   4
the HTML5 Canvas can be used as a background in websites modified as needed to design.

Introduction

Using double buffering background, the HTML5 Canvas can be used as a background in websites during the winter season, and be modified as needed to design.

Using the code

Here is some of the Canvas code:

JavaScript
var canvas = null;
var context = null;
var bufferCanvas = null;
var bufferCanvasCtx = null;
var flakeArray = [];
var flakeTimer = null;
var maxFlakes = 200;

function Flake() {
    this.x = Math.round(Math.random() * context.canvas.width);
    this.y = -10;
    this.drift = Math.random();
    this.speed = Math.round(Math.random() * 5) + 1;
    this.width = (Math.random() * 3) + 2;
    this.height = this.width;
}
			
function init() {
	canvas = document.getElementById('snowCanvasAgonAvdimetaj');
	context = canvas.getContext("2d");
	
	bufferCanvas = document.createElement("canvas");
	bufferCanvasCtx = bufferCanvas.getContext("2d");
	bufferCanvasCtx.canvas.width = context.canvas.width;
	bufferCanvasCtx.canvas.height = context.canvas.height;

	flakeTimer = setInterval(addFlake, 200);

	Draw();
	
	setInterval(animate, 30);
}

function addFlake() {
    flakeArray[flakeArray.length] = new Flake();
    if (flakeArray.length == maxFlakes)
        clearInterval(flakeTimer);
}

function blank() {
	bufferCanvasCtx.fillStyle = "#ec008e";
	bufferCanvasCtx.fillRect(0,0,bufferCanvasCtx.canvas.width, bufferCanvasCtx.canvas.height);
}

function animate() {
	Update();
	Draw();
}

function Update() {
    for (var i = 0; i < flakeArray.length; i++) {
        if (flakeArray[i].y < context.canvas.height) {
            flakeArray[i].y += flakeArray[i].speed;
            if (flakeArray[i].y > context.canvas.height)
                flakeArray[i].y = -5;
            flakeArray[i].x += flakeArray[i].drift;
            if (flakeArray[i].x > context.canvas.width)
                flakeArray[i].x = 0;
        }
    }
}

function Draw(){
	context.save();

	blank();

	for (var i = 0; i < flakeArray.length; i++) {
	    bufferCanvasCtx.fillStyle = "white";
	    bufferCanvasCtx.fillRect(flakeArray[i].x,flakeArray[i].y,flakeArray[i].width,flakeArray[i].height);
	}
	
	context.drawImage(bufferCanvas, 0,0,bufferCanvas.width, bufferCanvas.height);
	context.restore();
}

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
CEO Graphsix Studio
Albania Albania
CEO / Web & App Developer @ Graphsix Studio.
Studying Computer Engineering @ Faculty of Electrical and Computer Engineering, UP.

Comments and Discussions

 
GeneralMy vote of 5 Pin
noli kollqaku22-May-12 2:48
noli kollqaku22-May-12 2:48 
GeneralMy vote of 5 Pin
member6027-Apr-12 22:17
member6027-Apr-12 22:17 
General5 Pin
Esat Pllana27-Apr-12 6:22
Esat Pllana27-Apr-12 6:22 
GeneralMy vote of 5 Pin
Steve Maier27-Apr-12 5:13
professionalSteve Maier27-Apr-12 5:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.