canvas

Kontener dla grafiki tworzonej dzięki językom skryptowym.

atrybuty:

  • width
  • height

 

Sprawdzenie czy przeglądarka użytkownika obsługuje element html5 canvas – zamieszczenie w elemencie canvas wiadomości. Informacje zawarte w znaczniku canvas są widoczne tylko dla przeglądarek nie obsługujących html5.

<canvas id="myWork" width="200" height="200">[you need a browser that supports HTML5]</canvas>

 

Tworzenie obiektów w elemencie canvas:

  1. tworzymy element html5
  2. tworzymy obiekt JavaScript
  3. tworzymy metodę (funkcję) wykonującą operacje JavaScript
  4. dostęp do węzła DOM elementu canvas
  5. pobieranie kontekstu renderowania
  6. określamy kolor wypełnienia
  7. określamy kształt
  8. wypełniamy
  9. określamy kolejne elementy
  10. tworzymy obramowanie
  11. usuwamy pole
  12. uruchamiamy wykonanie funkcji poprzez onLoad
<canvas id="myWork" width="200" height="200">[you need a browser that supports HTML5]</canvas>

<script type="text/javascript">
  myCanvas=new Object();
  myCanvas.showCanvas=function(){
    myWorkNow = document.getElementById("myDo");
    myWork = myWorkNow.getContext('2d');
    
    myWork.fillStyle = '#D91E18';
    myWork.fillRect(0,0,100,100);

    myWork.fillStyle = '#446CB3';
    myWork.fillRect(100,0,100,100);
    
    myWork.fillStyle = '#87D37C';
    myWork.fillRect(0,100,100,100);
    
    myWork.fillStyle = '#F27935';
    myWork.fillRect(100,100,100,100);
                
    myWork.fil();
  }
  
  myCanvas.addStroke=function(){
    myWork.strokeStyle = '#FDE3A7';
    myWork.strokeRect(100,100,10,10);
  }
  
  myCanvas.clear=function(){
    myWork.clearRect(50,50,100,100);
  }
</script>

<body onLoad="myCanvas.showCanvas()">
<a href="#" onClick="myCanvas.addStroke()">klik to add Stroke</a>
<a href="#" onClick="myCanvas.clear()">klik to remove</a>

 

Metoda kontekstu renderowania drawImage()

zamieszczenie obrazka w elemencie canvas, parametry:

  • odwołanie do pliku
  • pozycja x, y
  • źródło obrazka

 

Dodanie cienia dzięki przypisaniu jego właściwości:

  • shadowColor
  • shadowOffsetX
  • shadowOffsetY
  • shadowBlur

właściwości cienia należy wprowadzić przed 'rysowaniem’ obrazka.

<script type="text/javascript">
  canvasWeb=new Object();
  canvasWeb.goCanvas=function(){
    
    canvasNew = document.getElementById("myImages");
    contextNew = canvasNew.getContext('2d');
    
    myPic = new Image();
    myPic.onload = function(){
      contextNew.shadowColor ='#000000';
      contextNew.shadowOffsetX=5;
      contextNew.shadowOffsetY=5;
      contextNew.shadowBlur=2;    
      contextNew.drawImage(myPic,10,10);
    }
    myPic.src = 'images/mountain13.jpg';
  }
</script>

<canvas id="myImages" width="550" height="550"></canvas>
<a href="#" onClick="canvasWeb.goCanvas()">show picture</a>

 

Kolejne metody kontekstu renderowania:

  • .beginPath()
  • .moveTo(x, y)
  • .closePath()
  • .lineTo(x, y)
  • .quadraticCurveTo(cpx, cpy, x, y)
  • .bezierCurveTo(cp1z, cp1y, cp2x, cp2y, x, y)
  • .arcTo(x1, y1, x2, y2, radius)
  • .arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • .rect(x, y, w, h)
  • .fill()
  • .stroke()
  • .clip()
  • .isPointInPath(x, y)

 

Rysowanie kształtów z lini prostych.

Użycie wypełnienia kolorem lub obrysowania tyczy się pierwszej otwartej ścieżki. Aby każda ścieżka miała inne obramowanie i wypełnienei nalezy po zamknięciu danej ścieżki przypisać kolor wypełnienia i obrys.

 

Używając funkcji .stroke() uzyskujemy obrys koła, używając funkcji .fill() wypełnienie koło.

W zależności czy tworzymy zgodnie czy przeciwnie z ruchem wskazówek zegara otrzymujemy inną część koła.

<script type="text/javascript">
  canvasWeb=new Object();
  canvasWeb.goCanvas=function(){
    var canvas = document.getElementById("myAct");
    var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(80,20);
    ctx.lineTo(80,60);
    ctx.lineTo(100,60);
    ctx.lineTo(100,80);
    ctx.lineTo(20,80);
    ctx.lineTo(20,20);
    ctx.closePath();

    ctx.stroke();   
    ctx.fillStyle="#f2c909";
    ctx.fill();
    
    ctx.beginPath();
    ctx.moveTo(40,40);
    ctx.lineTo(40,60);
    ctx.lineTo(60,60);
    ctx.lineTo(60,40);
    ctx.lineTo(40,40);
    ctx.closePath;
    
    ctx.stroke();    
    ctx.fillStyle="#e22117";
    ctx.fill();
  }
</script>

 

Łuki

podawane w radianach.
Wyliczanie radianów poprzez Rad = (π/180)*x°
lub dzięki JavaScript – Rad = (Math.PI/180)*x°

 

lub za pomocą funkcji Math.PI gdzie punkt :

  • 0 jest na 3 godzinie zegarowej
  • 0.5*PI – na 6 godzinie
  • 1*PI – na 9 godzinie
  • 1.5*PI – na 12 godzinie

 

metoda :

  • .arc(x, y, radius, startAngle, endAngle, anticlockwise)

gdzie:

x,y – środek koła na jakim oparty jest łuk,

radius – promień koła na jakim oparty jest łuk,

startAngle – punkt początkowy łuku w radianach,

endAngle – punkt końcowy łuku w radianach,

antyclockwise – wartość logiczna – true -> przeciwnie do ruchu wskazówek zegara, false -> zgodnie z ruchem wskazówek zegara

 

 
<script type="text/javascript">
  canvasWeb2=new Object();
  canvasWeb2.actCanvas=function(){
    var canvas = document.getElementById("myAct");
    var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(80,20);
    ctx.lineTo(80,60);
    ctx.lineTo(100,60);
    ctx.lineTo(100,80);
    ctx.lineTo(20,80);
    ctx.lineTo(20,20);
    ctx.closePath();

    ctx.stroke();   
    ctx.fillStyle="#f2c909";
    ctx.fill();
    
    ctx.beginPath();
    ctx.moveTo(40,40);
    ctx.lineTo(40,60);
    ctx.lineTo(60,60);
    ctx.lineTo(60,40);
    ctx.lineTo(40,40);
    ctx.closePath;
    
    ctx.stroke();    
    ctx.fillStyle="#e22117";
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc(180,60,40,0,0.5*Math.PI,true);
    ctx.fill();
    
  }
</script>

Gradient

metoda:

  • .createLinearGradient(x0,y0,x1,y1)

Gradient z lewa na prawo ma wartości(0,0,100,0)

Gradient z góry do dołu miałby wartości (0,0,0,100)

<script type="text/javascript">
  canvasWeb=new Object();
  canvasWeb.actCanvas=function(){
    var canvas = document.getElementById("myAct");
    var ctx = canvas.getContext('2d');
    var gradient = ctx.createLinearGradient(00,0,200,0);
    gradient.addColorStop(0,"#e22117");
    gradient.addColorStop(1,"#f2c909");
    ctx.fillStyle = gradient; 
    ctx.fillRect(0,0,200,200);
  }
</script>

#html5