HTML >Canvas

Canvas

Hva

Å tegne med Javascript

Et av de sakene som står på dagsorden når den nye HTML5 spesifiseres er det nye elementet canvas. I skrivende stund er dette delvis implementert i de fleste nye nettlesere. Denne modulen har bare som intensjon og gi en lite, foreløpig smakebit av hva dette kan komme til å bli. Eksemplene skal fungere i de nyeste versjonene av FireFox, Opera, explorer og Chrome.

Eksemplene baserer seg på 2DContext som er de grafiske omgivelsene. Typisk skriver vi:

	var canvas = document.getElementById('canvasid');
	var dc = canvas.getContext('2d');

API'en til dette context objektet er beskrevet hos w3C [1] , og er nødvendig for å se handlingsmulighetene. Vi vil også etterhvert får se en rekke javascriptbiblioteker som legger seg på toppen av dette. Et eksempel er KINETICSJS [2] som er brukt i eksempel 6 nedenfor og i modulen Interaktiv .

Eksempel 1

Javascriptet:

function drawHus(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext)
    {
          var dc = canvas.getContext('2d');
          dc.fillStyle = "rgb(200,0,0)";
        dc.fillRect (100, 100, 80, 80);
        
        dc.beginPath();
        dc.moveTo(100,100);
        dc.lineTo(140,70);
        dc.lineTo(180,100);
        dc.fill();
    } 
    else 
    {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}

Eksempel 2

Javascriptet:

function drawBilde(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext)
    {
          var dc = canvas.getContext('2d');
         var img = new Image();   
         img.onload = function()
         {  
               dc.drawImage(img, 20, 20, 100, 100) 
         }  
         img.src = 'http://www.it.hiof.no/~borres/allround/selfimages/bs1.gif'; 
    } 
    else 
    {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}

Eksempel 3

Javascriptet:

function drawSinus(cid)
{
    var canvas = document.getElementById(cid);
    if (canvas.getContext)
    {
          var dc = canvas.getContext('2d');
        dc.strokeStyle = "rgb(0,0,0)";        
        dc.beginPath();
        dc.moveTo(0,100);
        dc.lineTo(360,100);
        dc.stroke();
        
        dc.strokeStyle = "rgb(200,0,0)";
        dc.beginPath();
        dc.moveTo(0,100);
        for (v=0; v<360; v++)
        {
            rad=1.0*v*(2.0*Math.PI)/360.0;
            dc.lineTo(v,100-Math.round(100*Math.sin(rad)));
        }
        dc.stroke();
    } 
    else 
    {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}

Eksempel 4

Javascriptet:

var imgno=0;
var animCanvas=null;
var imList=null;
function setup(cid)
{
    animCanvas = document.getElementById(cid);
    imList=new Array();
    for(var ix=0;ix<8;ix++)
    {
        imList[ix]=new Image();
        imList[ix].src = 'http://www.it.hiof.no/~borres/allround/selfimages/bs'+(ix+1)+'.gif';
    }
    
}

function animate(cid)
{
    if(!imList)
    {
        setup(cid)
    }
    else
    {
    var dc = animCanvas.getContext('2d');
      dc.fillStyle = "rgb(255,255,255)";
    dc.fillRect (0, 0, 800, 200);
    for(var ix=0;ix<imList.length;ix++)
    {
         var imtop=50;
         if(ix==imgno)
         {
             imtop=20;
        }
         
         dc.drawImage(imList[ix], ix*70, imtop, 60, 60) 
    }
    
    imgno++;
    if(imgno > imList.length)
        imgno=0;
    }
    setTimeout(animate,500);
}

Eksempel 5

Javascriptet:

var rotimg = new Image();   
rotimg.src = 'http://www.it.hiof.no/~borres/allround/selfimages/bs1.gif';
var angle=0.05; 
var rotcid='c5'
function drawHead()
{
    var canvas = document.getElementById(rotcid);
    if (canvas.getContext)
    {
          var dc = canvas.getContext('2d');
        dc.restore();
        dc.fillStyle="rgb(256,256,256)";
        dc.fillRect(0,0,400,400);
        dc.translate(50,50);        
        dc.rotate(angle);
        dc.drawImage(rotimg, -25, -25, 50, 50);
        dc.translate(-50,-50);
        if(angle < 90)
            setTimeout(drawHead,100);
        dc.save();
    } 
    else 
    {
          // canvas-unsupported
          alert('cannot do canvas');
    }
}

3D

Som det framgår av eksemplene, etableres det en 2D-kontekst hver gang vi skal tegne i en canvas:

var dc = canvas.getContext('2d');

Hva så med 3D ?

I øyeblikket ser det ut til at WebGL er løsningen, se modulen WebGL . Se også: KINETICSJS [2] , ProcessingJS [3] og IvanK Lib [4] .

Referanser

HTML Canvas 2D Context W3C dev.w3.org/html5/2dcontext/ 02-10-2011

Canvas Animation, Interactivity, WebGL KINETICJS www.kineticjs.com/ 02-10-2011

Processing.js Processing.js JavaScript library for 2D graphics processingjs.org/ 01-07-2012

IvanK Lib Ivan Kuckir JavaScript library for 2D graphics lib.ivank.net/ 01-07-2012

HTML5 w3.org dev.w3.org/html5/spec/Overview.html 14-03-2011

HTML5 Wikipedia en.wikipedia.org/wiki/HTML_5 14-03-2010

Drawing Graphics with canvas Mozilla https://developer.mozilla.org/en/drawing_graphics_with_canvas 14-09-2010

Canvas html5canvastutorials.com www.html5canvastutorials.com/ 02-10-2011

Vedlikehold

B. Stenseth, november 2009

( Velkommen ) HTML >Canvas ( Interaktiv )