Posts filed under ‘Canvas’

Normal Mapped Photos using HTML5 Canvas

<![CDATA[

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<p.length; i++){
			if(i==0)
				ctx.moveTo(p[i][0],p[i][1]);
			ctx.lineTo(p[i][0],p[i][1]);
		}
		ctx.fill();
	}

	this.ellipse = function(x,y,width,height,c){

		ctx.fillStyle = "rgba("+c.r+","+c.g+","+c.b+","+c.a+")";
		x = x || 0;
		y = y || 0;

		if (width <= 0 && height <= 0) {
			return;
		}

		ctx.beginPath();

		width *= 2;
		height *= 2;

	      var offsetStart = 0;

	      // Shortcut for drawing a circle
	   //   if (width === height) {
	  //      ctx.arc(x - offsetStart, y - offsetStart, width / 2, 0, Math.PI*2, false);
	    //  } else {
	        var w = width / 2,
	          h = height / 2,
	          C = 0.5522847498307933;
	        var c_x = C * w,
	          c_y = C * h;

	        // TODO: Audit
	        ctx.moveTo(x + w, y);
	        ctx.bezierCurveTo(x + w, y - c_y, x + c_x, y - h, x, y - h);
	        ctx.bezierCurveTo(x - c_x, y - h, x - w, y - c_y, x - w, y);
	        ctx.bezierCurveTo(x - w, y + c_y, x - c_x, y + h, x, y + h);
	        ctx.bezierCurveTo(x + c_x, y + h, x + w, y + c_y, x + w, y);
	    //  }

		var doFill = true;

	      if (doFill) {
	        ctx.fill();
	      }
	    //  if (doStroke) {
	     //   ctx.stroke();
	      //}

	      ctx.closePath();
	}

}

]]>

Reklamlar

24,11,2010 at 13:32 Yorum bırakın

A very simple Canvas and JQuery application

<![CDATA[My first canvas-jquery sample. Hope to create a simple html5 game and publish soon.

/lib/canvas_gallery/

<html>
	<head>
		<link rel="stylesheet" href="draw.css" />
	</head>
	<body onload="draw()">
		<img id="frame" src="images/picture_frame.png" />
		<ul>
			<li>
				<img src="images/gallery_1.jpg" />
			</li>
			<li>
				<img src="images/gallery_2.jpg" />
			</li>
			<li>
				<img src="images/gallery_3.jpg" />
			</li>
			<li>
				<img src="images/gallery_4.jpg" />
			</li>
			<li>
				<img src="images/gallery_5.jpg" />
			</li>
		</ul>
                <script src="jquery-1.4.4.min.js"></script>
                <script src="draw.js"></script>
	</body>
</html>
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	float: left;
	margin: 0 10px 10px 0;
}

img {
	display: none;
}
function draw(){
	$("li").each(function(){
		$(this).append("<canvas width='100' height='115' />");
		var ctx = $("canvas", this)[0].getContext('2d');
		ctx.drawImage($("img", this)[0], 0, 0);
		ctx.drawImage($("#frame")[0], -3, -3, 108, 124);
	})
}

]]>

13,11,2010 at 20:42 Yorum bırakın


Takvim

Aralık 2017
P S Ç P C C P
« Ara    
 123
45678910
11121314151617
18192021222324
25262728293031

Posts by Month

Posts by Category