MyCanvase | Een pagina over een canvas class voor javascript, inclusief voorbeeld en broncode.

In de HTML5 standaard is een canvas element opgenomen waarmee het mogelijk zal zijn om grafische bewerkingen uit te voeren binnen het browser scherm met behulp van javascript code. Een canvas is een gebied waarbinnen men kan tekenen maar ook afbeeldingen kan laden en zelfs complexe tekeningen kan maken binnen de browser. Er zijn al mensen die deze techniek inzetten voor het maken van geavanceerde 2D en 3D spellen, maar ook wat eenvoudigere toepassingen zijn mogelijk. Zo zal het mogelijk worden om op eenvoudige wijze een tabel om te zetten in een grafiek of allerlei diagrammen te presenteren zonder gebruik te maken van bijvoorbeeld flash technologie.

Maar met een beetje slimme code is het ook als in oude browsers zoals IE6 mogelijk om kleine grafische elementen toe te voegen aan een pagina en bijvoorbeeld een lijn grafiek te genereren door middel van javascript en css. Deze kleine code bibliotheek maakt het mogelijk om eenvoudige grafische elementen te tekenen door middel van de MyCanvas class. De truc is dat ik hier gebruik maak van hele kleine divjes van 1 x 1 pixel die ik positioneer binnen een canvas div en die ik via standaard HTML een kleur kan geven. De class heeft de mogelijkheid om punten te plaatsen, lijnen te trekken, rechthoeken te tekenen en cirkels te tekenen en een pen kleur in te stellen. Deze code is maar een kleine subset van wat het nieuwe canvas zal kunnen maar het voordeel van deze code is dat het klein en compact is en werkt in alle browsers die css en javascript ondersteunen. Ook kunt u de MyCanvas class zelf eenvoudig uitbreiden en naar eigen wens aanpassen.

CSS

.MyCanvas
{
	position: relative;
	padding: 0px;
	overflow: hidden;
}

.Point
{
	position: absolute;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

.VerticalLine
{
	position: absolute;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	font-size: 0px;
	width: 1px;
}

.HorizontalLine
{
	position: absolute;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	font-size: 0px;
	height: 1px;
}

Javascript

// -------------------------------------
// Mycanvas class for javascript
// -------------------------------------

MyCanvas = function(width, height)
{
var m_this = this;
var elem  = document.createElement("div");
var color = "#000000";
	 
   document.body.appendChild(elem);
   elem.className    = "MyCanvas";
   elem.style.width  = width;
   elem.style.height = height;

// ==== Set the color of the pen ====	 
	 
   this.setColor = function(_color) {
     color = _color;
   }

// ==== Set a pixel on the canvas ====	 	 
	 
   this.drawPoint = function(x, y) {
     var point = document.createElement("div");
     point.style.backgroundColor = color;
     point.className = "Point";
     point.style.left = x;
     point.style.top  = y;
     elem.appendChild(point);
   }

// ==== Draw a line ====	 
	 
   this.drawLine = function(x1, y1, x2, y2) {
     if (x1 == x2 && y1 == y2) {
       m_this.drawPoint(x1, y1);
       return;
     }
     if (x1 > x2) {
       var temp = x1;
       x1 = x2;
       x2 = temp;
       temp = y1; 
       y1 = y2;
       y2 = temp;
    }
    if (x1 == x2)	{
      if (y1 > y2) {
        temp = y1;
        y1 = y2;
        y2 = temp
      }
      var line = document.createElement("div");
      line.style.backgroundColor = color;
      line.className = "VerticalLine";
      line.style.top = y1;
      line.style.left = x1;
      line.style.height  = (y2 - y1 + 1) + "px";
      elem.appendChild(line);
    }
    else if (y1 == y2) {
      var line = document.createElement("div");
      line.style.backgroundColor = color;
      line.className = "HorizontalLine";
      line.style.top = y1;
      line.style.left = x1;
      line.style.width  = (x2 - x1 + 1) + "px";
      elem.appendChild(line);
    }
    else {
      var slope = (y1 - y2) / (x1 - x2);
      if (Math.abs(slope) <= 1) {
        for (var x = x1; x <= x2; x++)
          m_this.drawPoint(x, y1 + ((x - x1) * slope));
      }
      else {
        if (y1 > y2) {
          var temp = x1;
          x1 = x2;
          x2 = temp;
          temp = y1;
          y1 = y2;
          y2 = temp;
        }
        var invertedSlope = (x1 - x2) / (y1 - y2);
        for (var y = y1; y <= y2; y++)
          m_this.drawPoint(x1 + ((y - y1) * invertedSlope), y);
       }
     }
   }
	 
// ==== Draw a rectangle ====	 
 
    this.drawRect = function(x1, y1, x2, y2) {
      m_this.drawLine(x1, y1, x2, y1);
      m_this.drawLine(x2, y1, x2, y2);
      m_this.drawLine(x2, y2, x1, y2);
      m_this.drawLine(x1, y2, x1, y1);
    }

// ==== Draw a circle ====	 
	 
    this.drawCircle = function(x, y, radius) {
      var PIx2 = Math.PI * 2;
      var increment = PIx2 / radius;
      var points = new Array();
      for (var t = 0; t < PIx2; t += increment)  
        points.push([x + radius * Math.cos(t), y + radius * Math.sin(t)]);
      for (var i = 0; i < points.length; i++) {
        if (i + 1 < points.length)
          m_this.drawLine(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1]);
        else
          m_this.drawLine(points[i][0], points[i][1], points[0][0], points[0][1]);
      }
   }
}

Voorbeeld html

<html>
<head>
<title>Examples of mycanvas</title>
<link rel="stylesheet" href="mycanvas.css"/>
<script src="mycanvas.js"></script>
</head>
<body>
<h3>This is a testpage showing a simple demonstaration of te MyCanvas class.</h3>
<script language="JavaScript" type="text/javascript">

var g = new MyCanvas(240, 120); 

g.drawRect(0, 0, 239, 119);

for(i=0; i<120; i+=10) {
  for(j=0; j<120; j+=10) {
    g.setColor(0xff000 + i*256+j); 	  
    g.drawLine(i, j, 120-i, 120-j); 	  
  }
}		

g.setColor("red"); 
g.drawPoint(200, 10); 
g.drawLine(1, 1, 239, 119); 
g.setColor("green"); 
g.drawRect(220, 80, 20, 50);

g.setColor("blue"); 
g.drawCircle(185, 50, 30); 

</script>
</body>
</html>

CSS

Javascript

Voorbeeld html

Internet techniek

Disclaimer.