Alesna webbutveckling

Javascript

Animeringar

Textvågen

Javascript och stilar

Kalendern

HTML5 och Canvas

Med inträdet av den nya html-standarden html5 och CSS3, så har vi programmerare fått mer leksaker att leka med.
Om alla webbläsare hade haft stöd för nyheterna, så hade livet blivit betydligt enklare för webbutvecklarna. Så är det naturligtvis inte. Självklart så varierar stödet i de olika webbläsarna, vilket ställer till det mer än vanligt.

T.ex. så kommer html5 med ett helt koppel nya formulärelement, t.ex. number, range, date, password, email osv. Chrome har stöd för dessa nyheter, vilket gör att formulärkontroller med javascript blir helt överfödigt. Kontrollen finns liksom inbyggd i Chrome.

I strykklass ligger Internet Explorer. Vad i glödheta sysslar man med på Microsoft nuförtiden?
Enligt färska siffror, så är det cirka 10% av internetanvändarna, som använder Explorer! Anmärkningsvärt med tanke på att de allra flesta har fått med Internet Explorer i sitt operativsystem.

Här nedan ska vi titta på ett html-element, som naturligvis inte finns i Explorer, Canvas.
Canvas kommer med tiden att göra de flesta insticksmoduler (javapplets, flashfiler etc.) överflödiga. Istället så kommer utveklarna av spel och andra applikationer att använda en canvas för utritningar.

Canvas och Klockan

Man lägger ut en canvas i sin kod på följande sätt:

<canvas id="klocka" width="200" height="200">Här håller vi reda på tiden</canvas>

Sedan kan detta element hämtas in med hjälp av ett javascript. T.ex. så kan man anropa en funktion i body onload. Den funktionen kan ligga i en extern javascriptskod och se ut som nedan.

<body onload="init();">
/* Javascript */
var block;
var graphics;
var canvas;
var vrid = (Math.PI*2)/12;
var s = (Math.PI*2)/60;


	function init()
	{
	block = document.getElementById("block");
	canvas = document.getElementById("klocka");
	graphics = canvas.getContext("2d");
	ur();
	}

Sist i init sker ett anrop på funktionen ur:

	function ur()
	{
	var d = new Date();
	var hours = d.getHours();
		if(hours<10)
		  hours = "0"+hours;
	var minutes = d.getMinutes();
		if(minutes < 10)
		  minutes = "0"+minutes;
	var seconds = d.getSeconds();
		if(seconds < 10)
		  seconds = "0"+seconds;
		
	var str = hours+":"+minutes+":"+seconds;
	block.innerHTML=str;
		
	graphics.fillStyle = "RGB(255,255,255)";
	graphics.fillRect(0,0,canvas.width,canvas.width);
	graphics.fillStyle = "RGB(0,0,0)";
 
		for(i=0;i<12;i++)
		{
		x = 50 * Math.cos((vrid * (i+1))- (vrid*3))+ (canvas.width/2);
		y = 50 * Math.sin( (vrid* (i+1)) - (vrid*3))+ (canvas.width/2);
		graphics.fillText((i+1),x-4,y+4);
		}
	graphics.fillStyle = "RGB(255,255,255)";
	graphics.strokeStyle = "RGB(0,0,0)";
	graphics.beginPath();
	graphics.moveTo(canvas.width/2,canvas.width/2);
	x = 48 * Math.cos((s*seconds)-(15*s)) + canvas.width/2;
	y = 48 * Math.sin((s*seconds)-(15*s)) + canvas.width/2;
	graphics.lineTo(x,y);
	graphics.stroke();
			
	graphics.beginPath();
	graphics.moveTo(canvas.width/2,canvas.width/2);
	x = 42 * Math.cos((s*minutes)-(15*s)) + canvas.width/2;
	y = 42 * Math.sin((s*minutes)-(15*s)) + canvas.width/2;
	graphics.lineTo(x,y);
	graphics.stroke();
			
	x =36 *  Math.cos((hours * 30 + minutes / 2) * Math.PI / 180- Math.PI / 2)+
	canvas.width/2;
	y =36 * Math.sin((hours * 30 + minutes / 2) * Math.PI / 180- Math.PI / 2) +
	canvas.width/2;
	graphics.beginPath();
	graphics.moveTo(canvas.width/2,canvas.width/2);
	graphics.lineTo(x,y);
	graphics.stroke()
	setTimeout("ur();",5);
	}