Creating CANVAS animation HTML 5 has introduced a tag called CANVAS that allows visual element to be displayed in the browser. The CANVAS tag is very much the same as any other element used in HTML. Basically the <canvas> tag is used to rendering graphs, UI elements, and other custom graphics on the client. The example below demonstrates the basic structure of implementing the canvas:
<html>
<head>
<script type="application/x-javascript"> function draw() { var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d");
………… Shape Drawing Section …………
}
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>
The tag uses the new HTML5 element CANVAS as the opening and closing tag. Width and height attributes specify the size of the CANVAS space on the screen. It is the ID that is important. Here the ID is named "myCanvas." Using JavaScript, you can now program the illustration that will appear in the CANVAS tag. The examples below demonstrate shapes that may be created using this tag alongside JavaScript. HTML 5 CANVAS tag & JavaScript2 www.visualwebz.com Seattle Web Developerment Drawing a Box The draw function [function draw()] gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. The example simply fills a rectangle; by setting fillStyle to a colors using CSS color specifications and calling fillRect.
You may want to check http://color.shawnolson.net/ which allows you to select CSS valued colors.
<html>
<head>
<script type="application/x-javascript"> function draw() { var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d");
………… Shape Drawing Section …………
}
}
</script>
</head>
<body onload="draw();">
<canvas id="myCanvas" width="200" height="200">
</canvas>
</body>
</html>
The tag uses the new HTML5 element CANVAS as the opening and closing tag. Width and height attributes specify the size of the CANVAS space on the screen. It is the ID that is important. Here the ID is named "myCanvas." Using JavaScript, you can now program the illustration that will appear in the CANVAS tag. The examples below demonstrate shapes that may be created using this tag alongside JavaScript. HTML 5 CANVAS tag & JavaScript2 www.visualwebz.com Seattle Web Developerment Drawing a Box The draw function [function draw()] gets the canvas element, then obtains the 2d context. The ctx object can then be used to actually render to the canvas. The example simply fills a rectangle; by setting fillStyle to a colors using CSS color specifications and calling fillRect.
You may want to check http://color.shawnolson.net/ which allows you to select CSS valued colors.
| The example below draws a blue box <html> <head> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,5,196)"; ctx.fillRect (10, 20, 100, 100); } } </script> </head> <body onLoad="draw();"> <canvas id="myCanvas" width="250" height="250"></canvas> </body> </html> |
No comments:
Post a Comment