HTML5 canvas in real time E-Book

Antonio Taccetti

• Herausgeber: Antonio Taccetti
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Veröffentlichungsjahr: 2017

Beschreibung

This e-book is an interactive e-book this means that the user can enter datas in the pages and content of these will conform to the new values.To enter these datas, in the pages of the e-book, have been implemented controls similar to those that can be found on the Internet pages and also an executing button to impart the command to adapt the content of the page to the new values.The subject of the e-book is the Compose HTML5 Canvas, that for its characteristics well suits to be documented with this method.The tag canvas is one of the novelties of HTML5,it is a container that can be used to draw and to work with graphic elements.Formally canvas is a HTML container defined by the usual opening and closing tags.The reasons for which it is useful to use canvas are numerous:- Interactivity:Canvas interacts with users- Animation:Each drawing can be animated, from the bouncy balls to games, till the kinematics- Flexibility: To Create Lines, complex shapes, texts, images, including audio/video- Standard Web: Free and gratuitous use of Open technology, valid throughout the world- Browser:Canvas is supported by all major browsers for desktop and mobile devices- Popularity:wide availability of resources, libraries and tools in support of the DevelopersCanvas can be used for:- Creating games in 2D and 3D- Excellent substitute of Flash for banners and ads- generation of eye-catching graphics both static as well as interactive- with images and audio/video to produce effective experiences of learning- Art and decoration with colors, nuances, transparencies and shadowsTo exhibit its potential, the canvas, requires a language support such as JavaScript, and it is this language that also gives interactivity to the pages of this e-book.This guide explores the All Controls javascript for canvas by providing the essential knowledge to the use of each of them.For each command are showed one or more interactive examples.This e-book, thanks to the interactivity will allow to a better appreciation of the real potentiality of the various controls and the interaction among them.In order to be able to consult this e-book is necessary an epub reader3 of last generation (autumn 2016).Due to scarce availability, (autumn 2016) of e-book evolved readers capable of supporting the full interactivity, we give here below non-exhaustive list of advanced readers for various operating systems.- Windows:Macintosh and Linux: AZARDI Infogrid Pacific- Android:bookari (premium version)- iPad:Ebook Reader- Chrome browser:readium (extension)Of course other readers may be able to support the reading of interactive3 ePub

Leseprobe

Tavola dei Contenuti - "TOC"

How to use this interactive e-book

How does interactivity

Subject of this ebook

<canvas>, a bit 'of history

When to use <canvas>

Introduction to using <canvas>

Color definition

Named colors - live

Hexadecimal colors - live

Colors rgb - live

Colors rgb in % - live

Colors rgba (wiyh opacity) - live

Producing composite colors - live

Basic commands

beginPath() - live

moveTo(), lineTo(), stroke() - live

strokeStyle, closePath() - live

fill() - live

save(), restore()

save() restore() - live

Styles of lines

lineCap - live

lineJoin - live

lineWidth - live

Rectangles

rect() - live

fillRect() - live

strokeRect() - live

isPointInPath() - live

clearRect() - live

Rettangoli, riassunto comandi - live

Arches and circumferences

Degrees and radians

arc() - live

Smile - live

Spiral - live

arcTo() draws an arc between two tangents of a circle

arcTo() arc between bribes - live

clip()

clip(), save(), restore() - live

Colors, gradients and styles

fillStyle - live

fillStyle linear gradients

createLinearGradient() - live

createRadialGradient, radial gradients

createRadialGradient() - live

createPattern()

createPattern() - live

addColorStop() - live

strokeStyle shaded rectangle gradients - live

strokeStyle blurred text gradients - live

Shadow effect

shadowColor, shadowBlur - live

shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY - live

Bezier curves

bezierCurveTo() - live

quadraticCurveTo() - live

Text

font - live

textAlign - live

textBaseline - live

fillText - live

measureText, read - live

measureText writing - live

strokeText default - live

strokeStyle, fillStyle, strokeText(), outline and fill - live

Transformations

scale() shapes - live

scale() text - live

Ellipse - live

rotate() shapes - live

rotate() text - live

Squares with gradient rotated spiral - live

translate() - live

transform(), shapes - live

transform(), shapes and text - live

setTransform() text - live

setTransform() rectangle - live

setTransform(),move, scale, rotate, distort - live

setTransform(), animation - live

drawImage()

drawImage(), upload image - live

drawImage() upload and resize - live

drawImage() cut out - live

Handling level pixels

getImageData(), get the pixel data

createImageData() - live

getImageData() - live

putImageData() - live

globalAlpha

globalAlpha - live

Transparency Alpha - live

globalCompositeOperation

globalCompositeOperation - live

toDataURL()

toDataURL() - live

animation effect - live

rebound effect - live

animation without timer - live

views - live

bar chart - live

a complex bar graph - live

Pie chart - live

Archimedean spiral - live

Fermat spiral - live

hyperbolic spiral- live

logarithmic spiral - live

lemniscata spiral - live

Heart drawn with equation - live

Punti di riferimento

Indice

Copertina

How to use this interactive e-book

LThe ePub acronym is short for electronic publication, an open standard whose development is carried out by the International Digital Publishing Forum (iPDF).Latest evolution of the format is ePub 3. 

Has its roots in XML, HTML5 and CSS3, brings with it many new features that show how they will be e-books in the near future.

Version 3 of the ePub format preserves the features of the previous version, but is more responsive and interactive.

Responsive

: it indicates the possibility of the content of the pages to automatically adapt to the size of the reading device. (In part already present in previous versions epub)

. 

Interactive

: Inside there are different types of multimedia content (buttons and controls to interact with users, audio, video, animations, etc)

These innovations make it so that users are able to go beyond the simple reading experience.

.

To remember that the extension of the ePub file remains identical regardless of the EPUP version.To open these files you need a specific software for reading.If the reader software is not suitable for ePub version 3, you will have unexpected needed results ..The e-book could be read but with partial interactivity, interactivity absent or message: "The file may be corrupted."Downloading with ebub version 3 format file may take longer than usual if the media are heavy.

You need an ereader EPUB3 latest generation (autumn 2016) to appreciate this e-book.

At this http://www.taccetti.net/html5canvaslive/index.php address you can download the pages of the e-book and see if your e-reader can read.

The following is a non-exhaustive list of advanced readers (EPUB3) for various operating systems.

Windows, Machintosh e Linux

: AZARDI Infogrid Pacific 

http://azardi.infogridpacific.com/azardi-download.html

Android

: bookari (versione premium) 

https://play.google.com/store/search?q=bookari%20epub3&c=apps

iPad

:Ebook Reader 

https://itunes.apple.com/it/app/ebook-reader/id381260755?mt=8

browser Chrome

: readium (

extension

) 

https://chrome.google.com/webstore/detail/readium/fepbnnnkkadjhjahcafoaglimekefifl?utm_source=chrome-app-launcher-info-dialog

No direct relationship is in place with the owners of the software mentioned and of course other e-reader can work.

Other developers that have software with features suitable for the reading of EPUB3, write to the author, and will be included in the list. (click here).

Finished in Florence (Italy), October 2016ByAntonioTaccettiwww.taccetti.net

How does interactivity

Se riesci a leggere questo, il tuo browser non supporta Canvas.

To interact with readers, in the pages of this ebook, epub version 3, have been written, controls similar to those of the web pages.In the pages of this e-book, after the user has entered new values and did clcik the button Run, these pages will change adapting to the data entered.

Per essere individuate, tutte le pagine interattive hanno nel loro titolo la parola live.

The controls for entering values are:

Free text

: 

Numbers or text.

.

Eventuali valori numerici inseriti in controlli per testo saranno trattati come testo.Make the sum +  : Enter alphanumeric text:

Selection

:

default values to be chosen from a list proposed.

Colore:

red

green

blue

S

electors

:

horizontal bars with selectors that allow to determine values for the context of the page.

0 

 255

Button

:Run button to refresh the page and delete button to erase.

If you're reading this page in a preview of the book you can see the controls, but probably, in this context, are not active.Possibly try them, the result will appear on the <canvas>.

Subject of this ebook

The subject of this e-book is the component <canvas> HTML5, which due to its characteristics.The tag <canvas> is one of the novelties of HTML5, and can be used to design and operate with graphic elements.

 Examples are written to one or more pages for each command javascript.Through these examples the reader will appreciate the potential of <canvas>, the various commands javascript and the interaction among them.

All code can be downloaded from the author's website.The web address after the index. 

<canvas>, a bit 'of history

Compared to earlier versions, <canvas> is one of the most significant updates of HTML5.

<Canvas> is basically a space that can be used for graphics and animation.

This is not an absolute novelty, the first appearance of the <canvas> is 2004 under Apple to increase the functionality of MacOS X.

In 2011, the nonprofit group Khronos released Version 1.0 of WebGL specification, a set of JavaScript APIs to allow the definition of environments <canvas> three-dimensional and the interaction between them.

In the following years, <canvas> is admitted by the W3C and implemented in popular browsers as part of the HTML5 specification.

With HTML5 are defined two modes of use of the <canvas>: 2D and 3D.

The developer who intends to use <canvas> can then choose whether to operate in mode (technically defined context) 2D or 3D.

To date, (autumn 2016), the versions of popular browsers (Chrome, Firefox, IE etc.) Have a fairly uniform support javascript for <canvas>.

When to use <canvas>

There are several reasons why people want to use the HTML5 canvas functions with its multiple possibilities.

Interactivity: Responding to user actions.This is done by listening for keyboard events, mouse etc.It is therefore not limited to static image.Animation: Every object drawn on the <canvas> can be animated.Flexibility: There are practically no limits to the forms. Lines, text, images, etc.In addition to these also audio and video.Support multiple platforms: <canvas> is supported by all major browsers (autumn 2016) and can be enjoyed on devices such tablet and iPhone smartphone, iPad and of course, desktop.Open source: open technology and free to use.

The element HTML5 <canvas>, for its qualities, it is making it indispensable, rendering obsolete proprietary technologies in vogue in past years.The tag is similar to others such as <div>, <table> etc. and it is normally defined using attributes width and height.

Two important differences distinguish this from all other tags.Its content can be processed with JavaScript.Its dimensions are as always in pixels (it is not necessary dichirare px).According to the specifications, the values for these attributes, they can only be positive integers.Their statement is similar to that of the inline CSS, for example:

The <canvas> tag is normally placed between the <body> ..... <body> and positioned anywhere on the page is deemed appropriate.

To access the <canvas> with JavaScript, you must create a context (2d or 3d), and then use the controls made available for the calculations.

Like the other tags the <canvas> element is a DOM node embedded in the HTML page, while the 2D context or WebGL (3d) is an object with properties and methods used to render graphics within the <canvas> .

Each <canvas> element can have only one context.

This guide will always use the code

If used with different sizes it will be specified from time to time.

Introduction to using <canvas>

<canvas> is basically a space on an HTML page that can be used for graphics and animation.This space is defined by the width and height attributes.

In this e-book, width and height are 300 and 150 pixels.

The coordinate system <canvas>

When you draw shapes and text you must know the exact spot on which to operate, to do this you use the Cartesian coordinates.

Each image is in pixels (short for picture element) and in computer graphics, each indicating each point as part of an image.

Each pixel is characterized by its position (X, Y) and values ​​such as color and intensity.

In the images represented with computer data, the points may be so small as not to be distinguishable from each other, appearing fused into a single figure even if printed or displayed on a monitor.

Although in some images with transparent parts may not appear immediately, each picture is a rectangle.

Any point of the rectangle / image can be specified as a pair of (X, Y), where X is the number of pixels away from the left edge and Y is the number of pixels away from the upper edge.

The origin of the axes X, Y is placed at the top to the left of the rectangle / image.

Throughout this guide the definition of the <canvas> is:

<canvas height="300" id="canvas" width="400"> </canvas>

Many commands to draw on the <canvas> can be used in different contexts with similar results but not identical.

Color definition

140 are the default colors in HTML and CSS specification and then used without problems even with <canvas>,.The table below contains the names of the colors CSS officers (CSS 2.1 specifications) with their RGB values, hexadecimal and decimal.

The complete table is available on the Internet: here:The colors can be specified using the following methods:

hexadecimal

RGB

RGBA

HSL

HSLA

Hexadecimal

hexadecimal color values are supported in all major browsers..

In HTML, a color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

For example, #00FF00 is displayed as greeb, because red is set to its highest value (FF) and the others are set to the lowest value (00).

Examples of color definition HEX:

#p1 {background-color: #FF0000;}   // red #p2 {background-color: #00FF00;}   // green #p3 {background-color: #0000FF;}   // blue

RGBRGB color values are supported in all major browsers.

In HTML, a color can also be specified as an RGB value, using this formula: rgb(red, green, blue).Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.  For example, rgb(0,255,0) is displayed as green, because red is set to its highest value (255) and the others are set to 0.  To display the black: rgb(0,0,0) and the white: rgb(255,255,255).

Examples of RGB color definition:

#p1 {background-color: rgb(255, 0, 0);}   // red #p2 {background-color: rgb(0, 255, 0);}   // green #p3 {background-color: rgb(0, 0, 255);}   // blue

RGBAThe RGB color values are supported in IE9 +, Firefox 3+, Chrome, Safari, and Opera 10+RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Esempi di Definizione colori RGB con opacità:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   // red with opacity 0.3 #p2 {background-color: rgba(0, 255, 0, 0.1);}   // red green opacity 0.1 #p3 {background-color: rgba(0, 0, 255, 0.9);}   // red blue opacity 0.9

Named colors - live

change the values for example live

<style type="text/css">div {height:30px;width:100%;}

<div style="background-color:redgreenbluecyanorangeyellowBlueVioletMagenta"></div>

<div style="background-color:greenbluecyanorangeyellowBlueVioletMagentared"></div>

<div style="background-color:bluecyanorangeyellowBlueVioletMagentaredgreen"></div>

<div style="background-color:cyanorangeyellowBlueVioletMagentaredgreenblue"></div>

<div style="background-color:orangeyellowBlueVioletMagentaredgreenbluecyan"></div>

Hexadecimal colors - live

change the values for example live<style type="text/css">div {height:30px;width:100%;}

<div style="background-color:# "></div>

<div style="background-color:# "></div>

#<div style="background-color: "></div>

<div style="background-color:# "></div>

<div style="background-color:# "></div>

Colors rgb - live

change the values for example live<style type="text/css">div {height:30px;width:100%;}</style>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

Enter the RGB values for red green and blue

Colors rgb in % - live

change the values for example live<style type="text/css">div {height:30px;width:100%;}</style>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

<div style="background-color:rgb( )"></div>

Enter the RGB value for red green and blue with their percentage

Colors rgba (wiyh opacity) - live

change the values for example liveEnter the RGB values for red green and blue, and a decimal value (between 0.0 and 1.0) for opacity.<style type="text/css">div {height:30px;width:100%;}</style>

<div style="background-color:rgba( )"></div>

<div style="background-color:rgba( )"></div>

<div style="background-color:rgba( )"></div>

<div style="background-color:rgba( )"></div>

<div style="background-color:rgba( )"></div>

Producing composite colors - live

Se riesci a leggere questo, il tuo browser non supporta Canvas. Rosso:0 255 Verde:0255 Blu:0255

Move the sliders to define the colors.At the top the values of each color.

LISTING OF THE WEB PAGEOn a web page, the visual result of the indicators may be different.

<!DOCTYPE html><html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<canvas id="canvas" width="400" height="300"></canvas>

<p style="background-color:#F00;">Rosso:<br /><input class="colore" type="range" id="Rosso" name="Rosso" value="255" min="0" max="255"> 255</p><p style="background-color:#0F0;">Verde:<br /><input class="colore" type="range" id="Verde" name="Verde" value="0" min="0" max="255"> 255</p><p style="background-color:#00F;">Blu:<br /><input class="colore" type="range" id="Blu" name="Blu" value="0" min="0" max="255"> 255</p> </body> </html>

Basic commands

The following commands are required for each operation to be performed with <canvas> and none of them is used without the other

beginPath() 

The BeginPath function opens a path bracket in the specified device context.

After a path bracket is open, an application can begin calling GDI drawing functions to define the points that lie in the path. An application can close an open path bracket by calling the EndPath function.

When an application calls BeginPath for a device context, any previous paths are discarded from that device context. The following list shows which drawing functions can be used.

moveTo(x,y)

 The moveTo() method moves drawing cursor to the specified point in the canvas.x, y are the Cartesian coordinates of <canvas>

lineTo(x,y)

The lineTo() method adds a new point and draws a line from the new added to the last specified point.

By using the LineTo () method will be defined more segments from the last point defined.

After adding the point, we can call the stroke() method to draw the path on the canvas.

strokeStyle()

: defines the color or style that will be used for lines and around shapes..If strokeStyle () is not specified, the default color is black. (

See also section Rectangles

)

fill()

: The fill() method fills the current path with the default color black.  To change the fill color set the fillStyle property for another color/gradient.  If the path is not closed, the fill() method will connect the last point and the startpoint to close the path, and then fill the path.

stroke() 

The stroke() method does the drawing for the path defined.

The default color is black.

We can use the strokeStyle property to change the stroke style to color or gradient.

It can be compared to the ink to use to write on paper, virtually makes visible all that has been designed with moveTo (), lineTo etc.

closePath()

creates a path by connecting the current point and the starting point.

After closing the path we can call stroke() method to draw the path.

We can also call the fill() method to fill the path with black color as the default.

To change the color we can use the fillStyle property to fill with another color or gradient or pattern.

Example

beginPath() - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.

ctx.beginPath(); // start a process, or reset the current path ctx.lineWidth=""; // size of the line ctx.strokeStyle="redgreenblue"; // color of the line ctx.moveTo(,);// Startup x,y of the segment ctx.lineTo(,); // terms x, y of the segment ctx.stroke(); // draws ctx.beginPath(); // Begins a path and resets the current path, empties cache ctx.lineWidth=""; // size of the line ctx.strokeStyle="greenyellowredblue"; // color of the line ctx.moveTo(,);//Startup x,y of the segment ctx.lineTo(,); // End x,y of the segment ctx.stroke(); // draws 

beginPath() Begins a path, or resets the current path

moveTo(), lineTo(), stroke() - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.

ctx.beginPath(); // start a process, or reset the current path ctx.moveTo(,);// beginning x, y of the segment ctx.lineTo(,); // terms x, y of the segmentctx.stroke();// No ctx.stroke(); // draws

moveTo(): Moves the path to the specified point in the canvas, without creating a linelineTo(): Adds a new point and creates a line to that point from the last specified point in the canvasstroke(): draws the path you have defined (with moveTo(), lineTo(), lineTo(), eg.)

strokeStyle, closePath() - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.

ctx.beginPath(); // start a process, or reset the current path ctx.strokeStyle ='greenredblue' //It defines the color of the line ctx.moveTo(,); //It defines the starting point  (x1,y1)  ctx.lineTo(,); //It defines the first point of arrival (x2,y2)  ctx.lineTo(,); //It defines the second point of arrival (x2a,y2a)  ctx.lineTo(,); //It defines the third point of arrival (x2b,y2b) No closePath()ctx.closePath()  // if present ctx.closePath (); closes the path by drawing a segment between the first point and the last ctx.stroke(); // draws

strokeStyle: Sets or returns the color, gradient, or pattern used for strokesclosePath(): Creates a path from the current point back to the starting point

fill() - live

Se riesci a leggere questo, il tuo browser non supporta Canvas.

// if ctx.fill () is not active, ctx.stroke () is active: draws segments// if ctx.fill () is active, ctx.stroke () it is not active: draws colored figurectx.fill();// No ctx.fill();// No ctx.stroke();ctx.stroke();Note: With fill () the area is drawn,Not using fill (), you must stroke () to draw the segments that are blacks.

fill():Fills the current drawing (path)