HTML and CSS Reference
In-Depth Information
SVG also supports rendering existing graphics in the form of external image files, as shown
here:
<svg id="mySVG">
<image href="orange.jpg" width="250" height="100"/>
</svg>
Thought experiment
Creating a game
In this thought experiment, apply what you've learned about this objective. You can
find answers to these questions in the “Answers” section at the end of this chapter.
You were hired to create a game. For the first stage of the game, you must make a
ball move from the left side of the screen to right side. How can you achieve this
with the HTML5
<canvas>
element? How about with SVG? You demonstrate this
stage to stakeholders, and they love it. For the next stage, when the ball is clicked, it
must split into two balls. As the number of balls increases due to being clicked, what
considerations need to be taken into account? Would using SVG or the
<canvas>
element be the better solution for this game?
■
JavaScript is a powerful tool that enables developers to manipulate the DOM
programmatically in the browser.
■
HTML5 supports rich media controls to incorporate video by using the
<video>
element and audio by using the
<audio>
element.
■
The
<video>
element supports multiple media formats by using the
<source>
element.
■
The HTML5
<canvas>
and
<svg>
elements support a rich API to create both simple
and complex graphics in the browser.
■
Both the
<canvas>
and
<svg>
graphics engines can draw text, lines, shapes, fonts, fills,
and gradients.
■
The
<canvas>
element is drawn on via JavaScript by getting a reference to the context.
■
The
<svg>
element renders graphics by using a declarative syntax.
Search WWH ::
Custom Search