Game Development Reference
In-Depth Information
An XML-based language, SVG provides a familiar DOM API on the page for accessing each
element.
What are the drawbacks of SVG?
The main drawback stems from the fourth advantage. The more complex and larger the
document, the slower the rendering—as with any other technology that uses DOM.
Canvas
The way of the canvas element into HTML5 is quite illustrative. It did not arrive from the top as most W3C
standards before, which often were good in theory but suffered from problems when applied. It was
created by browser developers and approved as a standard after it was popularized. It all began in 2004
after Apple added canvas to one of the WebKit versions, where it was used for rendering certain widgets in
Safari. Other browser developers felt a need for a similar tool, so in 2005 canvas appeared in Firefox, and
in 2006, was added to Opera.
Canvas is essentially an array of pixels with a special JavaScript API for manipulation: drawing primitive
and complex objects, inserting images and text, manipulating pixels, etc. Canvas is a simple tag. For
example, Listing 10-2 shows a page with canvas and a little JavaScript, which produces the same image
as the SVG sample.
Listing 10-2. An HTML file with canvas tag and JavaScript source code to draw an animated circle and a ship
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"><!--
window.addEventListener('load', function ()
{
// Get the canvas element.
var canvas = document.getElementById('myCanvas'),
w = 64,
h = 64,
step = 'in';
if (!canvas || !canvas.getContext) {
return;
}
// Get the canvas 2d context.
var ctx = canvas.getContext('2d');
if (!ctx) {
return;
}
// Create new img element
var img = new Image();
img.src = 'ship.png';
setInterval(function ()
 
Search WWH ::




Custom Search