HTML5 Canvas: native interactivity and animation for the Web
Gespeichert in:
| Hauptverfasser: | , |
|---|---|
| Format: | Buch |
| Sprache: | English |
| Veröffentlicht: |
Sebastopol, CA [u.a.]
O'Reilly
2011
|
| Ausgabe: | 1. ed. |
| Schlagworte: | |
| Online-Zugang: | Inhaltsverzeichnis |
| Beschreibung: | Includes index |
| Beschreibung: | XIX, 628 S. Ill. 24 cm |
| ISBN: | 9781449393908 |
Internformat
MARC
| LEADER | 00000nam a2200000 c 4500 | ||
|---|---|---|---|
| 001 | BV039125350 | ||
| 003 | DE-604 | ||
| 005 | 20130125 | ||
| 007 | t | ||
| 008 | 110707s2011 a||| |||| 00||| eng d | ||
| 020 | |a 9781449393908 |9 978-1-4493-9390-8 | ||
| 020 | |z 144939390X (pbk.) |9 1-449393-90-X (pbk.) | ||
| 035 | |a (OCoLC)681500780 | ||
| 035 | |a (DE-599)BVBBV039125350 | ||
| 040 | |a DE-604 |b ger |e rakwb | ||
| 041 | 0 | |a eng | |
| 049 | |a DE-83 |a DE-355 |a DE-573 |a DE-Aug4 |a DE-898 | ||
| 082 | 0 | |a 006.7/4 |2 23 | |
| 084 | |a ST 250 |0 (DE-625)143626: |2 rvk | ||
| 084 | |a ST 252 |0 (DE-625)143627: |2 rvk | ||
| 100 | 1 | |a Fulton, Steve |e Verfasser |4 aut | |
| 245 | 1 | 0 | |a HTML5 Canvas |b native interactivity and animation for the Web |c Steve Fulton and Jeff Fulton |
| 250 | |a 1. ed. | ||
| 264 | 1 | |a Sebastopol, CA [u.a.] |b O'Reilly |c 2011 | |
| 300 | |a XIX, 628 S. |b Ill. |c 24 cm | ||
| 336 | |b txt |2 rdacontent | ||
| 337 | |b n |2 rdamedia | ||
| 338 | |b nc |2 rdacarrier | ||
| 500 | |a Includes index | ||
| 650 | 0 | 7 | |a HTML 5.0 |0 (DE-588)7704810-6 |2 gnd |9 rswk-swf |
| 689 | 0 | 0 | |a HTML 5.0 |0 (DE-588)7704810-6 |D s |
| 689 | 0 | |5 DE-604 | |
| 700 | 1 | |a Fulton, Jeff |e Verfasser |4 aut | |
| 856 | 4 | 2 | |m Digitalisierung UB Regensburg |q application/pdf |u http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=024143819&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |3 Inhaltsverzeichnis |
| 999 | |a oai:aleph.bib-bvb.de:BVB01-024143819 | ||
Datensatz im Suchindex
| _version_ | 1804147958059368448 |
|---|---|
| adam_text | Table
of Contents
Preface
.....................................................................xv
1.
Introduction to HTML5 Canvas
............................................ 1
The Basic HTML Page
2
<!doctype html>
3
<html lang= en >
3
<meta charset= UTF-8 >
3
<title>...</title>
3
A Simple HTML5 Page
3
Basic HTML We Will Use in This Book
4
<div>
4
<canvas>
5
The Document Object Model (DOM) and Canvas
5
JavaScript and Canvas
6
JavaScript Frameworks and Libraries
6
Where Does JavaScript Go and Why?
6
HTML5 Canvas Hello World!
7
Encapsulating Your JavaScript Code for Canvas
8
Adding Canvas to the HTML Page
9
Testing to See Whether the Browser Supports Canvas
10
Retrieving the 2D Context
11
The drawScreenO Function
11
Debugging with Consolclog
14
The 2D Context and the Current State
15
The HTML5 Canvas Object
16
Another Example: Guess The Letter
17
How the Game Works
17
The Guess The Letter Game Variables
17
The initGameO Function
19
The eventKeyPressedO Function
19
The drawScreenO Function
21
Exporting Canvas to an Image
22
The Final Game Code
23
What s Next
26
2
Drawina on the Canvas
.........................................
....... 27
The Basic File Setup for This Chapter
27
The Basic Rectangle Shape
28
The Canvas State
29
What s Not Part of the State?
30
How Do We Save and Restore the Canvas State?
30
Using Paths to Create Lines
30
Starting and Ending a Path
31
The Actual Drawing
31
Examples of More Advanced Line Drawing
32
Advanced Path Methods
34
Arcs
34
Bezier
Curves
36
The Canvas Clipping Region
37
Compositing on the Canvas
39
Simple Canvas Transformations
41
Rotation and Translation Transformations
42
Scale Transformations
47
Combining Scale and Rotation Transformations
49
Filling Objects with Colors and Gradients
51
Setting Basic Fill Colors
51
Filling Shapes with Gradients
52
Filling Shapes with Patterns
61
Creating Shadows on Canvas Shapes
64
What s Next
67
3.
The
HTMLS
Canvas Text API
....................................
........69
Displaying Basic Text
69
Basic Text Display
69
Handling Basic Text in Text Arranger
70
Communicating Between HTML Forms and the Canvas
71
Using measureText
71
fillText and strokeText
73
Setting the Text Font
78
Font Size, Face Weight, and Style Basics
78
Handling Font Size and Face in Text Arranger
79
Font Color
83
Font Baseline and Alignment
86
Text Arranger Version
2.0
90
Text and the Canvas Context
94
vi i
TabfeofCuitents
Global Alpha
and Text
94
Global
Shadows and Text
96
Text with Gradients and Patterns
100
Linear Gradients and Text
100
Radial Gradients and Text
102
Image Patterns and Text
102
Handling Gradients and Patterns in Text Arranger
103
Width, Height, Scale, and toDataURLO Revisited
106
Dynamically Resizing the Canvas
106
Dynamically Scaling the Canvas
109
The toDataURLO Method of the Canvas Object
110
Final Version of Text Arranger
112
What s Next
121
4.
Images on the Canvas
................................................. 123
The Basic File Setup for This Chapter
123
Image Basics
124
Preloading Images
125
Displaying an Image on the Canvas with drawlmage()
125
Resizing an Image Painted to the Canvas
127
Copying Part of an Image to the Canvas
128
Simple Cell-Based Sprite Animation
130
Creating an Animation Frame Counter
130
Creating a Timer Loop
131
Changing the Tile to Display
131
Advanced Cell-Based Animation
132
Examining the Tile Sheet
133
Creating an Animation Array
133
Choosing the Tile to Display
133
Looping Through the Tiles
134
Drawing the Tile
134
Moving the Image Across the Canvas
135
Applying Rotation Transformations to an Image
137
Canvas Transformation Basics
137
Animating a Transformed Image
140
Creating a Grid of Tiles
142
Defining a Tile Map
143
Creating a Tile Map with Tiled
143
Displaying the Map on the Canvas
145
Zooming and Panning an Image
149
Creating a Window for the Image
149
Drawing the Image Window
150
Panning the Image
152
TableefConteiits I
ix
Zoom and Pan the Image
153
Application: Controlled Pan and Zoom
154
Pixel Manipulation
158
The Canvas Pixel Manipulation API
158
Application Tile Stamper
159
Copying from One Canvas to Another
166
What s Next
169
5.
Math, Physics, and Animation
...........................................171
Moving in a Straight Line
171
Moving Between Two Points: The Distance of a Line
174
Moving on a Vector
179
Bouncing Off Walls
183
Bouncing a Single Ball
184
Multiple Balls Bouncing Off Walls
188
Multiple Balls Bouncing with a Dynamically Resized Canvas
193
Multiple Balls Bouncing and Colliding
198
Multiple Balls Bouncing with Friction
210
Curve and Circular Movement
216
Uniform Circular Motion
217
Moving in a Simple Spiral
220
Cubic
Bezier
Curve Movement
223
Moving an Image
228
Creating a Cubic
Bezier
Curve Loop
232
Simple Gravity, Elasticity, and Friction
236
Simple Gravity
236
Simple Gravity with a Bounce
240
Gravity with Bounce and Applied Simple Elasticity
243
Simple Gravity, Simple Elasticity, and Simple Friction
246
Easing
249
Easing Out (Landing the Ship)
249
Easing In (Taking Off)
253
What s Next?
257
6.
Mixing HTML5 Video and Canvas
........................................ 259
HTML5 Video Support
259
Theora
+
Vorbis
=
.ogg
260
H.264
+ $$$ =
.mp4
260
VP8
+
Vorbis
=
.webm
260
Combining All Three
261
Converting Video Formats
261
Basic HTML5 Video Implementation
262
Plain-Vanilla Video Embed
263
χ
I TaMeef Contents
Video
with
Controls,
Loop, and
Autoplay 265
Altering the Width and Height of the Video
266
Preloading Video in JavaScript
271
A Problem with Events and Embedded Video in HTML5
274
Video and the Canvas
275
Displaying a Video on HTML5 Canvas
275
HTML5 Video Properties
281
Video on the Canvas Examples
285
Using the currentTime Property to Create Video Events
285
Canvas Video Transformations: Rotation
289
Canvas Video Puzzle
294
Creating Video Controls on the Canvas
307
Animation Revisited: Moving Videos
316
What s Next?
320
7.
Working with Audio
...................................................321
The Basic <audio> Tag
321
Audio Formats
322
Supported Formats
322
Audacity
322
Example: Using All Three Formats
323
Audio Tag Properties, Functions, and Events
324
Audio Functions
325
Important Audio Properties
325
Important Audio Events
326
Loading and Playing the Audio
326
Displaying Attributes on the Canvas
327
Playing a Sound with No Audio Tag
331
Dynamically Creating an Audio Element in JavaScript
331
Finding the Supported Audio Format
332
Playing the Sound
333
Look Ma, No Tag!
334
Creating a Canvas Audio Player
336
Creating Custom User Controls on the Canvas
337
Loading the Button Assets
337
Setting Up the Audio Player Values
339
Mouse Events
340
Sliding Play Indicator
340
Play/Pause Push Button: Hit Test Point Revisited
342
Loop/No Loop Toggle Button
343
Click-and-Drag Volume Slider
344
Case Study in Audio: Space Raiders Game
352
Why Sounds in Apps Are Different: Event Sounds
353
Table of Contents I
xi
Iterations
353
Space Raiders Game Structure
353
Iteration
#1:
Playing Sounds Using a Single Object
362
Iteration
#2:
Creating Unlimited Dynamic Sound Objects
362
Iteration
#3:
Creating a Sound Pool
365
Iteration
#4:
Reusing Preloaded Sounds
368
What s Next
378
8.
Canvas Game Essentials
................................................379
Why Games in HTML5?
379
Canvas Compared to Flash
379
What Does Canvas Offer?
380
Our Basic Game HTML5 File
380
Our Game s Design
382
Game Graphics: Drawing with Paths
382
Needed Assets
382
Using Paths to Draw the Game s Main Character
383
Animating on the Canvas
385
Game Timer Loop
385
The Player Ship State Changes
386
Applying Transformations to Game Graphics
388
The Canvas Stack
388
Game Graphic Transformations
390
Rotating the Player Ship from the Center
390
Alpha Fading the Player Ship
392
Game Object Physics and Animation
393
How Our Player Ship Will Move
393
Controlling the Player Ship with the Keyboard
395
Giving the Player Ship a Maximum Velocity
399
A Basic Game Framework
400
The Game State Machine
400
The Update/Render (Repeat) Cycle
404
The FrameRateCounter Object Prototype
406
Putting It All Together
407
Geo
Blaster Game Structure
407
Geo
Blaster Global Game Variables
410
The player Object
412
Geo
Blaster Game Algorithms
412
Arrays of Logical Display Objects
412
Level Knobs
415
Level and Game End
415
Awarding the Player Extra Ships
416
Applying Collision Detection
417
iii
I Table of Contents
The Geo
Blaster Basic Full Source
419
Rock Object Prototype
443
What s Next
445
9.
Combining
Bitmaps and
Sound
..........................................447
Geo
Blaster Extended
447
Geo
Blaster Tile Sheet
448
Rendering the Other Game Objects
454
Adding Sound
459
Pooling Object Instances
463
Adding in a Step Timer
466
Geo
Blaster Extended Full Source
468
Creating a Dynamic Tile Sheet at Runtime
497
A Simple Tile-Based Game
501
Micro Tank Maze Description
501
The Tile Sheet for Our Game
503
The Playfield
504
The Player
505
The Enemy
506
The Goal
507
The Explosions
507
Turn-Based Game Flow and the State Machine
508
Simple Tile Movement Logic Overview
512
Rendering Logic Overview
514
Simple Homegrown
AI
Overview
515
Micro Tank Maze Complete Game Code
516
What s Next
534
10.
Mobilizing Games with PhoneGap
.......................................535
Going Mobile!
535
Introducing PhoneGap
536
The Application
536
The Code
537
Examining the Code for BSBingo.html
542
The Application Code
545
Creating the iOS Application with PhoneGap
546
Installing Xcode
546
Installing PhoneGap
547
Creating the BS Bingo PhoneGap Project in Xcode
549
Testing the New Blank Application in the Simulator
551
Integrating BS Bingo into the Project
553
Setting the Orientation
555
Changing the Banner and Icon
556
TaMeefûmfeirts
I
ш
Testing
on the Simulator
558
Adding in an iPhone Gesture
561
Adding the Gesture Functions to index.html
561
Testing on a Device
563
Using Xcode to Target a Test Device
564
Beyond the Canvas
565
What s Next
566
11.
Further Explorations
.................................................. 567
3D
with WebGL
567
What Is WebGL?
568
How Do I Test WebGL?
568
How Do I Learn More About WebGL?
569
What Does a WebGL Application Look Like?
569
Full Code Listing
575
Further Explorations with WebGL
581
WebGL JavaScript Libraries
581
Mukiplayer Applications with ElectroServer
5 583
Installing ElectroServer
583
The Basic Architecture of a Socket-Server Application
585
The Basic Architecture of an ElectroServer Application
587
Creating a Chat Application with ElectroServer
588
Testing the Application in Google Chrome
593
Further Explorations with ElectroServer
598
This Is Just the Tip of the Iceberg
606
Conclusion
607
Index
.....................................................................609
xi*
I Tabte of Contents
|
| any_adam_object | 1 |
| author | Fulton, Steve Fulton, Jeff |
| author_facet | Fulton, Steve Fulton, Jeff |
| author_role | aut aut |
| author_sort | Fulton, Steve |
| author_variant | s f sf j f jf |
| building | Verbundindex |
| bvnumber | BV039125350 |
| classification_rvk | ST 250 ST 252 |
| ctrlnum | (OCoLC)681500780 (DE-599)BVBBV039125350 |
| dewey-full | 006.7/4 |
| dewey-hundreds | 000 - Computer science, information, general works |
| dewey-ones | 006 - Special computer methods |
| dewey-raw | 006.7/4 |
| dewey-search | 006.7/4 |
| dewey-sort | 16.7 14 |
| dewey-tens | 000 - Computer science, information, general works |
| discipline | Informatik |
| edition | 1. ed. |
| format | Book |
| fullrecord | <?xml version="1.0" encoding="UTF-8"?><collection xmlns="http://www.loc.gov/MARC21/slim"><record><leader>01446nam a2200385 c 4500</leader><controlfield tag="001">BV039125350</controlfield><controlfield tag="003">DE-604</controlfield><controlfield tag="005">20130125 </controlfield><controlfield tag="007">t</controlfield><controlfield tag="008">110707s2011 a||| |||| 00||| eng d</controlfield><datafield tag="020" ind1=" " ind2=" "><subfield code="a">9781449393908</subfield><subfield code="9">978-1-4493-9390-8</subfield></datafield><datafield tag="020" ind1=" " ind2=" "><subfield code="z">144939390X (pbk.)</subfield><subfield code="9">1-449393-90-X (pbk.)</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(OCoLC)681500780</subfield></datafield><datafield tag="035" ind1=" " ind2=" "><subfield code="a">(DE-599)BVBBV039125350</subfield></datafield><datafield tag="040" ind1=" " ind2=" "><subfield code="a">DE-604</subfield><subfield code="b">ger</subfield><subfield code="e">rakwb</subfield></datafield><datafield tag="041" ind1="0" ind2=" "><subfield code="a">eng</subfield></datafield><datafield tag="049" ind1=" " ind2=" "><subfield code="a">DE-83</subfield><subfield code="a">DE-355</subfield><subfield code="a">DE-573</subfield><subfield code="a">DE-Aug4</subfield><subfield code="a">DE-898</subfield></datafield><datafield tag="082" ind1="0" ind2=" "><subfield code="a">006.7/4</subfield><subfield code="2">23</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 250</subfield><subfield code="0">(DE-625)143626:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="084" ind1=" " ind2=" "><subfield code="a">ST 252</subfield><subfield code="0">(DE-625)143627:</subfield><subfield code="2">rvk</subfield></datafield><datafield tag="100" ind1="1" ind2=" "><subfield code="a">Fulton, Steve</subfield><subfield code="e">Verfasser</subfield><subfield code="4">aut</subfield></datafield><datafield tag="245" ind1="1" ind2="0"><subfield code="a">HTML5 Canvas</subfield><subfield code="b">native interactivity and animation for the Web</subfield><subfield code="c">Steve Fulton and Jeff Fulton</subfield></datafield><datafield tag="250" ind1=" " ind2=" "><subfield code="a">1. ed.</subfield></datafield><datafield tag="264" ind1=" " ind2="1"><subfield code="a">Sebastopol, CA [u.a.]</subfield><subfield code="b">O'Reilly</subfield><subfield code="c">2011</subfield></datafield><datafield tag="300" ind1=" " ind2=" "><subfield code="a">XIX, 628 S.</subfield><subfield code="b">Ill.</subfield><subfield code="c">24 cm</subfield></datafield><datafield tag="336" ind1=" " ind2=" "><subfield code="b">txt</subfield><subfield code="2">rdacontent</subfield></datafield><datafield tag="337" ind1=" " ind2=" "><subfield code="b">n</subfield><subfield code="2">rdamedia</subfield></datafield><datafield tag="338" ind1=" " ind2=" "><subfield code="b">nc</subfield><subfield code="2">rdacarrier</subfield></datafield><datafield tag="500" ind1=" " ind2=" "><subfield code="a">Includes index</subfield></datafield><datafield tag="650" ind1="0" ind2="7"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="2">gnd</subfield><subfield code="9">rswk-swf</subfield></datafield><datafield tag="689" ind1="0" ind2="0"><subfield code="a">HTML 5.0</subfield><subfield code="0">(DE-588)7704810-6</subfield><subfield code="D">s</subfield></datafield><datafield tag="689" ind1="0" ind2=" "><subfield code="5">DE-604</subfield></datafield><datafield tag="700" ind1="1" ind2=" "><subfield code="a">Fulton, Jeff</subfield><subfield code="e">Verfasser</subfield><subfield code="4">aut</subfield></datafield><datafield tag="856" ind1="4" ind2="2"><subfield code="m">Digitalisierung UB Regensburg</subfield><subfield code="q">application/pdf</subfield><subfield code="u">http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=024143819&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA</subfield><subfield code="3">Inhaltsverzeichnis</subfield></datafield><datafield tag="999" ind1=" " ind2=" "><subfield code="a">oai:aleph.bib-bvb.de:BVB01-024143819</subfield></datafield></record></collection> |
| id | DE-604.BV039125350 |
| illustrated | Illustrated |
| indexdate | 2024-07-09T23:59:30Z |
| institution | BVB |
| isbn | 9781449393908 |
| language | English |
| oai_aleph_id | oai:aleph.bib-bvb.de:BVB01-024143819 |
| oclc_num | 681500780 |
| open_access_boolean | |
| owner | DE-83 DE-355 DE-BY-UBR DE-573 DE-Aug4 DE-898 DE-BY-UBR |
| owner_facet | DE-83 DE-355 DE-BY-UBR DE-573 DE-Aug4 DE-898 DE-BY-UBR |
| physical | XIX, 628 S. Ill. 24 cm |
| publishDate | 2011 |
| publishDateSearch | 2011 |
| publishDateSort | 2011 |
| publisher | O'Reilly |
| record_format | marc |
| spelling | Fulton, Steve Verfasser aut HTML5 Canvas native interactivity and animation for the Web Steve Fulton and Jeff Fulton 1. ed. Sebastopol, CA [u.a.] O'Reilly 2011 XIX, 628 S. Ill. 24 cm txt rdacontent n rdamedia nc rdacarrier Includes index HTML 5.0 (DE-588)7704810-6 gnd rswk-swf HTML 5.0 (DE-588)7704810-6 s DE-604 Fulton, Jeff Verfasser aut Digitalisierung UB Regensburg application/pdf http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=024143819&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA Inhaltsverzeichnis |
| spellingShingle | Fulton, Steve Fulton, Jeff HTML5 Canvas native interactivity and animation for the Web HTML 5.0 (DE-588)7704810-6 gnd |
| subject_GND | (DE-588)7704810-6 |
| title | HTML5 Canvas native interactivity and animation for the Web |
| title_auth | HTML5 Canvas native interactivity and animation for the Web |
| title_exact_search | HTML5 Canvas native interactivity and animation for the Web |
| title_full | HTML5 Canvas native interactivity and animation for the Web Steve Fulton and Jeff Fulton |
| title_fullStr | HTML5 Canvas native interactivity and animation for the Web Steve Fulton and Jeff Fulton |
| title_full_unstemmed | HTML5 Canvas native interactivity and animation for the Web Steve Fulton and Jeff Fulton |
| title_short | HTML5 Canvas |
| title_sort | html5 canvas native interactivity and animation for the web |
| title_sub | native interactivity and animation for the Web |
| topic | HTML 5.0 (DE-588)7704810-6 gnd |
| topic_facet | HTML 5.0 |
| url | http://bvbr.bib-bvb.de:8991/F?func=service&doc_library=BVB01&local_base=BVB01&doc_number=024143819&sequence=000002&line_number=0001&func_code=DB_RECORDS&service_type=MEDIA |
| work_keys_str_mv | AT fultonsteve html5canvasnativeinteractivityandanimationfortheweb AT fultonjeff html5canvasnativeinteractivityandanimationfortheweb |