HTML5 en canvas voorbeeld 1

Een van de leukste features van HTML5 is het <canvas> element die u een krachtig grafisch canvas geeft waar u door middel van JavaScript grafische bewerkingen kunt uitvoeren. Het canvas element heeft maar een twee eigen attributen en kan verder gebruik maken van alle andere standaard attributen. Hier is een voorbeeld van een canvas met de naam mycanvas van 480 pixels breed en 320 pixels hoog met een leuke kleuren animatie in 2d.

Your browser does not support HTML5 canvas.

HTML5 en canvas sourcecode 2d animatie

Html code

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="colorsplash.js"></script>

<title>HTML5 Canvas Color Splash</title>

<style type="text/css">
	body {background-color:#000000; color:#555555;} 
	#MyCanvas { border: gray 1px solid; }
</style>

</head>
<body>

<div style="padding-top: 50px; text-align:center"> <!-- centered div -->
<canvas id="MyCanvas" width="640" height="480">
Your browser does not support HTML5 canvas.
</canvas>
</div>

<script language="JavaScript" type="text/javascript">
<!--
  window.addEventListener("load", canvasApp, false);
//-->
</script>

</body>
</html>

Javascript code: colorsplash.js

		
// Global variables	
var theCanvas;
var context;
var timer;
var count;
var centerX;
var centerY;
var displayWidth;
var displayHeight;
	
function def_pixel() {
  this.x = 0;
  this.y = 0;
  this.z = 0;
  this.sx = 0;
  this.sy = 0;
  this.sz = 0;
  this.r = 0;
  this.g = 0;
  this.b = 0;
}
  
var pixels = new Array();   
var num_pixels = 960;
var cnt1;
var cnt2;

// Init app en set timer for framerate & call timer function
function canvasApp() {
var i,an,sn,cs;

  theCanvas = document.getElementById("MyCanvas");
  context = theCanvas.getContext("2d");
  displayWidth = theCanvas.width;
  displayHeight = theCanvas.height;
  centerX = displayWidth / 2;
  centerY = displayHeight / 2;
  count = 0;
  cnt1 = 0;
  cnt2 = 0;
  for (i=0; i<num_pixels; i++) { 
    pixels[i] = new def_pixel();			// Create pixels  
    an = (i * 3) % 360;
    sn = Math.sin(an * 3.1428 / 180) * 6;
    cs = Math.cos(an * 3.1428 / 180) * 8;
    pixels[i].r = (Math.sin(an * 3.1428 / 120) + 1) * 255;
    pixels[i].g = (Math.cos(an * 3.1428 / 90) + 1) * 255;
    pixels[i].b = (Math.sin(an * 3.1428 / 60) + 1) * 255;
    pixels[i].x = sn;  
    pixels[i].y = cs;
    pixels[i].z = 100 - ((i * 4) % 99);  
  }
  timer = setInterval(onTimer, 1000/30);   // Try 30 FPS
}

// This routine is calles every frame
// recalc screen and then display screen	
function onTimer() {
  count++;
  updateScreen();
  drawScreen();
}
	
// Redraw the screen
function drawScreen() {
var i,col,siz; 

  context.fillStyle = "rgba(0,0,0,0.04)"; // Dont erase all
  context.fillRect(0,0,theCanvas.width,theCanvas.height);
  for (i=0; i<num_pixels; i++) { 
    col = 255 - pixels[i].sz * 2; 
    siz = 4 - parseInt(pixels[i].sz / 25);     // size based on distance from camera 
    context.fillStyle = 'rgb(' + Math.floor(pixels[i].r) + ',' + Math.floor(pixels[i].g) + ',' + Math.floor(pixels[i].b) + ')';
    context.beginPath();
    context.arc(pixels[i].sx, pixels[i].sy, siz, 0, 2 * Math.PI, false);
    context.closePath();
    context.fill();
  }
}

// Update the screen
function updateScreen() {
var i; 

  cnt1 += 2;
  cnt2 += 3;
  for (i=0; i<num_pixels; i++) { 
    pixels[i].z -= 1; 
    if (pixels[i].z <= 6) { 
      pixels[i].z += 96; 
    }
    an = (cnt1 + pixels[i].z) % 360;
    sn = Math.sin(an * 3.1428 / 180) * 20;
    an = cnt2 % 360;
    cs = Math.cos(an * 3.1428 / 180) * 20;

    // Simple perspective transformation from 3D to 2D: 
    // x2D = x3D / z3D * (screen width) + (half of screen width) 
    // y2D = y3D / z3D * (screen height) + (half of screen height) 
    pixels[i].sx = (pixels[i].x / (pixels[i].z / 2)) * displayWidth + (displayWidth / 2) + sn; 
    pixels[i].sy = (pixels[i].y / (pixels[i].z / 2)) * displayHeight + (displayHeight / 2) + cs;
    pixels[i].sz = pixels[i].z; 
  } 
}
	

Last update: 14-05-2015
 Binnen dit thema



 Meer thema's


 Lees hier de privacyverklaring van deze site.

Disclaimer.

Hoewel de heer Hein Pragt de informatie beschikbaar op deze pagina met grote zorg samenstelt, sluit de heer Pragt alle aansprakelijkheid uit met betrekking tot de informatie die, in welke vorm dan ook, via zijn site wordt aangeboden. Het opnemen van een afbeelding of verwijzing is uitsluitend bedoeld als een mogelijke bron van informatie voor de bezoeker en mag op generlei wijze als instemming, goedkeuring of afkeuring worden uitgelegd, noch kunnen daaraan rechten worden ontleend. Op de artikelen van de heer Pragt op deze Internetsite rust auteursrecht. Overname van informatie (tekst en afbeeldingen) is uitsluitend toegestaan na voorafgaande schriftelijke toestemming van de rechthebbende. Voor vragen over copyright en het gebruik van de informatie op deze site kunt u contact opnemen met: (email: mail@heinpragt.com). Dit is mijn