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:
- tworzymy element html5
- tworzymy obiekt JavaScript
- tworzymy metodę (funkcję) wykonującą operacje JavaScript
- dostęp do węzła DOM elementu canvas
- pobieranie kontekstu renderowania
- określamy kolor wypełnienia
- określamy kształt
- wypełniamy
- określamy kolejne elementy
- tworzymy obramowanie
- usuwamy pole
- 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>
Hope this helps and happy coding :)
Zobacz jeszcze
JavaScript
implementacja: <script type="text/javascript"> document.write("Hello Word!"); </script> Hierarchia uruchamiania: script w sekcji...