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="test3D.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",test3D.init(), false);
//-->
</script>

</body>
</html>

Javascript code: test3D.js

		
// ----------------------------------------------------
// test3D.js   A simple 3D test program in Javascript
// C 2018  Hein Pragt
// ----------------------------------------------------

'use strict';


/// <summary>
/// This is our test3D class
/// </summary>
var test3D = function ($) {
  var theCanvas;
  var context;
  var timer;
  var centerX;
  var centerY;
  var displayWidth;
  var displayHeight;
	
	// Pixel class
  function pixelClass() {
    this.x = 0;  // Vector
    this.y = 0;
    this.z = 0;
    this.sx = 0; // Transformed to screen
    this.sy = 0;
    this.sz = 0;
    this.r = 0;   // oolor
    this.g = 0;
    this.b = 0;
  }
  
  var pixels = new Array();   
  var num_pixels = 960;
  var freeRunCounter1;
  var freeRunCounter2;

    /// <summary>
    /// This routine is called every frame
    /// recalc screen and then display screen
    /// </summary>
    function onTimer() {
      updatePixels();
      drawScreen();
    }
	
    /// <summary>
    /// This routine redraws the whole screen every frame
    /// </summary>
    function drawScreen() {
      var i,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++) { 
        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();
      }
    }

    /// <summary>
    /// This routine updates all the pixels every frame
    /// </summary>
    function updatePixels() {
    var i,an,sn,cs; 

      freeRunCounter1 += 2;
      freeRunCounter2 += 3;
      for (i=0; i<num_pixels; i++) { 
        pixels[i].z -= 1; 
        if (pixels[i].z <= 6) { 
          pixels[i].z += 96; 
        }
        an = (freeRunCounter1 + pixels[i].z) % 360;
        sn = Math.sin(an * 3.1428 / 180) * 20;
        an = freeRunCounter2 % 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; 
      } 
    }

    /// <summary>
    /// This is the main start of thes module
    /// </summary>
    function init() {
    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;
      freeRunCounter1 = 0;
      freeRunCounter2 = 0;
			// Create pixels
      for (i=0; i<num_pixels; i++) { 
        pixels[i] = new pixelClass();			  
        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
    }

    return {
        init: init
    };
}();


Last update: 14-05-2015

Disclaimer: Hoewel de heer Pragt de informatie beschikbaar op deze site met grote zorg samenstelt, sluit hij alle aansprakelijkheid uit met betrekking tot de informatie die via deze site wordt aangeboden. Op de artikelen van de heer Pragt rust auteursrecht, overname van tekst en afbeeldingen is uitsluitend toegestaan na voorafgaande schriftelijke toestemming. Voor vragen hierover kunt u contact opnemen met: (email: mail@heinpragt.com). Heinpragt.com is ingeschreven bij de KvK onder nummer: 73839426.  Lees hier de privacyverklaring van deze site. Voor informatie over adverteren op deze site kunt u contact opnemen met: (email: mail@heinpragt.com).