Canvas: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
The [[wikipedia:Canvas element|canvas]] tag was introduced by Apple and has been [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html standardized to become part of HTML5]. | The [[wikipedia:Canvas element|canvas]] tag was introduced by Apple and has been [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html standardized to become part of HTML5]. | ||
[http://pzwart3.wdka.hro.nl/~mmurtaugh/canvas.html A simple example page...] | [http://pzwart3.wdka.hro.nl/~mmurtaugh/canvas.html A simple example page...] | ||
Revision as of 14:23, 25 September 2012
The canvas tag was introduced by Apple and has been standardized to become part of HTML5.
An example for color cycling with the canvas element
Get the canvas tag:
c=document.getElementById("c")
Get the "context" (like a paper):
p=c.getContext("2d");
Draw something!
p.fillRect(0, 0, 100, 100);
Examples
Here is a complete HTML page with a working canvas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
function draw(){
c = document.getElementById("canvas")
//console.log("c is",c)
p = c.getContext("2d")
x = 10
while (x<300) {
p.strokeRect(x,100,20,40)
x+=60
}
}
</script>
</head>
<body onload="draw()">
<h1>Hello canvas</h1>
<canvas id="canvas" width="640" height="640" style="border: 3px dotted red"></canvas>
</body>
</html>
Here's the output:
<canvas id="c1" width="300" height="300"> function draw(){
c = document.getElementById("c1")
//console.log("c is",c)
p = c.getContext("2d")
x = 10
while (x<300) {
p.strokeRect(x,100,20,40)
x+=60
}
} </canvas>
Variation: When the loop reaches the end of page it breaks the line. It redefines the "x" value to the begin of the line and adds 40px to "y".
<canvas id="c2" width="300" height="300" showsrc="true"> function draw(){ c = document.getElementById("c2"); p = c.getContext("2d"); hands = 1; x = 20; y = 200;
while (hands < 100) { console.log(hands); p.strokeRect(x,y,20,20); x = x + 50; hands++; if (x > 600) { x = 20; y = y + 40; } } } </canvas>