< BACK TO POST
LinkedIn Facebook Twitter

Blog

Normal Mapped Photos using HTML5 Canvas

November 24th, 2010 | Canvas , Cool Stuff , Html5 , Out-source

Post Source

Endergen.com

A great work using canvas and jquery

Try It

Source files

I included just CanvasApp.js . Go to website for other files.

function CanvasApp(settings){

	if(settings.seed)
		Math.random(settings.seed);


	// get canvas element
	var	canvas = document.getElementById(settings.element),
		ctx = canvas.getContext("2d"),
		thisApp = this,
		interval = null,
		loopCB = null;

	function loop(){
		loopCB(thisApp);
	}

	this.start  = function(newLoopCB){
		if(interval)
			return false;
		loopCB = newLoopCB;
		interval = setInterval(loop, 1);
		return true;
	}

	this.stop = function(){
		if(interval==NULL)
			return false;
		loopCB = NULL;
		clearInterval(interval);
		interval=null;
		return true;
	}

	// Access

	// Get the canvas associated with this app
	this.canvas = function(){
		return canvas;
	}

	// Get the canvas associated with this app
	this.ctx = function(){
		return canvas;
	}

	// Get the width of the canvas
	this.width = function(){
		return canvas.width;
	}

	// Get the height of the canvas
	this.height = function(){
		return canvas.height;
	}

	// Randomness
	this.randomRange = function(min,max){
		var r = min+(max-min)*Math.random();
		r = Math.min(Math.max(r,min),max);
		return r;
	}
	this.randomRangeInt = function(min,max){
		min = Math.floor(min);
		max = Math.floor(max);
		var r = min+(max-min)*Math.random();
		r = Math.min(Math.max(r,min),max);
		r = Math.floor(r);
		return r;
	}
	this.randomColor = function(){
		var c = thisApp.rgba(
			thisApp.randomRangeInt(0,255),
			thisApp.randomRangeInt(0,255),
			thisApp.randomRangeInt(0,255),
			1.0
		);
		return c;
	}

	// Drawing functions

	// Draw Line
	this.line = function(x0,y0,x1,y1,c){
		ctx.lineWidth = "2";
		ctx.strokeStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";

		ctx.beginPath();
		ctx.moveTo(x0, y0);
		ctx.lineTo(x1, y1);
		ctx.stroke();
		ctx.closePath();
	}
	// Draw Circle
	this.circle = function (x,y,r,c){
		this.ellipse(x,y,r,r,c);

	}
	// Draw Rect
	this.rect = function(l,t,w,h,c){
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		ctx.fillRect(Math.floor(l), Math.floor(t), Math.floor(w),Math.floor(h));
	}

	// Clear Canvas
	this.clear = function(c){
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		ctx.fillRect(0, 0, canvas.width, canvas.height);
	}
	// Utility
	this.rgba = function(r,g,b,a){
		return {r:r,g:g,b:b,a:a};
	}

	this.poly = function(p,c){
		if(p.length==0)
			return;
		ctx.beginPath();
		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		for(var i = 0; i											

Leave a Reply