rendering html5 ilustration.pdf

R e n d e R i n g H T M L 5

iLLusTRaTion

Matthew David

AMSTERDAM • BOSTON • HEIDELBERG • LONDON • NEW YORK • OXFORD

PARIS • SAN DIEGO • SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO

Focal Press is an imprint of Elsevier

Focal Press is an imprint of Elsevier

30 Corporate Drive, Suite 400, Burlington, MA 01803, USA

Linacre House, Jordan Hill, Oxford OX2 8DP, UK

No part of this publication may be reproduced or transmitted in any form or by any means, electronic

or mechanical, including photocopying, recording, or any information storage and retrieval system, without

permission in writing from the publisher. Details on how to seek permission, further information about the

Publisher’s permissions policies and our arrangements with organizations such as the Copyright Clearance Center

and the Copyright Licensing Agency, can be found at our website: www.elsevier.com/permissions.

This book and the individual contributions contained in it are protected under copyright by the Publisher (other

than as may be noted herein).

Notices

Knowledge and best practice in this ield are constantly changing. As new research and experience broaden our

understanding, changes in research methods, professional practices, or medical treatment may become necessary.

Practitioners and researchers must always rely on their own experience and knowledge in evaluating and using any

information, methods, compounds, or experiments described herein. In using such information or methods they

should be mindful of their own safety and the safety of others, including parties for whom they have a professional

responsibility.

To the fullest extent of the law, neither the Publisher nor the authors, contributors, or editors, assume any liability

for any injury and/or damage to persons or property as a matter of products liability, negligence or otherwise, or

from any use or operation of any methods, products, instructions, or ideas contained in the material herein.

ISBN: 978-0-240-81384-4

For information on all Focal Press publications

visit our website at www.elsevierdirect.com

Contents

The Tale of Web Image Formats .................................1

Bitmap Images: Using JPEG, GIF, and PNG Images on the Web.......1

Creating SVG Graphics ........................................3

The Fundamentals of Creating SVG Images and Adding them to

Your Web Pages ..............................................5

Leveraging SVG Drawing Tools.................................23

Adding the CANVAS Element to Your Web Page...................23

What You Have Learned.......................................36

RENdERING HTML5

ILLUsTRaTIoN

Tags are used in HTML5 to place and organize content at a level

that is descriptive. This does not mean that the page will look

good. Presentation of content on the page is controlled using

Cascading Style Sheets Level 3, or CSS3, in HTML5.

There are times, however, when you need to present graph-

ics, too. Typically, HTML has only provided support for pixel-

based images in JPEG and GIF image format. With HTML5, you

can now create mathematically generated images. The new

formats are scalable vector graphics (SVG) and CANVAS. The

difference between the two is that SVG is an XML-based lan-

guage that describes how an image should be displayed in two-

dimensional (2D) constructs. The CANVAS tag also describes

2D images, but it does so using JavaScript. The CANVAS tag

also allows you to easily integrate interactivity within it using

JavaScript.

In this article you will learn the following:

• ThenewimageformatsavailableinHTML5.

• HowtodrawusingSVG.

• HowtodrawwithCANVAS.

• HowtoaddinteractivitytoCANVASusingJavaScript.

The goal at the end of this article is that you will understand

how you can use the image formats in HTML5.

The Tale of Web Image Formats

The Web is not a friendly place for a designer. For many years

you have been limited to the number of ile formats you can

use. There are two predominant ile formats used on the Web for

creating graphics: JPEG and GIF.

Bitmap Images: Using JPEG, GIF, and PNG

Images on the Web

Both JPEG and GIF image formats are raster images created

from pixels of individual color. Both have positives and nega-

tives. JPEG images are an open standard managed by the Joint

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: