HTML5 Canvas
No matter what platform or tools you use, the HTML5 revolution will soon change the way you build web applications, if it hasn't already. HTML5 is jam-packed with features, and there's a lot to learn. This book gets you started with the Canvas element, perhaps HTML5's most exciting fe...
| Autor principal: | |
|---|---|
| Otros Autores: | |
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Sebastopol :
O'Reilly Media
2011.
|
| Edición: | 1st ed |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009627679106719 |
Tabla de Contenidos:
- Copyright; Dedication; Table of Contents; Preface; Running the Examples in the Book; What You Need to Know; How This Book Is Organized; Conventions Used in This Book; Using Code Examples; We'd Like to Hear from You; Safari® Books Online; Acknowledgments; Chapter 1. Introduction to HTML5 Canvas; The Basic HTML Page; ; ; ; ...; A Simple HTML5 Page; Basic HTML We Will Use in This Book; ; ; The Document Object Model (DOM) and Canvas; JavaScript and Canvas; JavaScript Frameworks and Libraries
- Where Does JavaScript Go and Why?HTML5 Canvas "Hello World!"; Encapsulating Your JavaScript Code for Canvas; Adding Canvas to the HTML Page; Using document to reference the canvas element in JavaScript; Testing to See Whether the Browser Supports Canvas; Retrieving the 2D Context; The drawScreen() Function; Debugging with Console.log; The 2D Context and the Current State; The HTML5 Canvas Object; Another Example: Guess The Letter; How the Game Works; The "Guess The Letter" Game Variables; The initGame() Function; The eventKeyPressed() Function; The drawScreen() Function
- Exporting Canvas to an ImageThe Final Game Code; What's Next; Chapter 2. Drawing on the Canvas; The Basic File Setup for This Chapter; The Basic Rectangle Shape; The Canvas State; What's Not Part of the State?; How Do We Save and Restore the Canvas State?; Using Paths to Create Lines; Starting and Ending a Path; The Actual Drawing; lineCap attributes; lineJoin attributes; lineWidth; strokeStyle; Examples of More Advanced Line Drawing; Advanced Path Methods; Arcs; context.arc(); context.arcTo(); Bezier Curves; The Canvas Clipping Region; Compositing on the Canvas; Simple Canvas Transformations
- Rotation and Translation TransformationsLesson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called; Lesson 2: We must "translate" the point of origin to the center of our shape to rotate it around its own center; Scale Transformations; Combining Scale and Rotation Transformations; Filling Objects with Colors and Gradients; Setting Basic Fill Colors; Filling Shapes with Gradients; Linear gradients; Linear horizontal gradients; Applying a horizontal gradient to a stroke; Applying a horizontal gradient to a complex shape
- Vertical gradientsDiagonal gradients; Radial gradients; Filling Shapes with Patterns; Creating Shadows on Canvas Shapes; What's Next; Chapter 3. The HTML5 Canvas Text API; Displaying Basic Text; Basic Text Display; Handling Basic Text in Text Arranger; Communicating Between HTML Forms and the Canvas; Using measureText; Centering text using width; What about the height of the text?; fillText and strokeText; Setting the Text Font; Font Size, Face Weight, and Style Basics; Handling Font Size and Face in Text Arranger; Available font styles; Available font weights; Generic font faces
- Font size and HTML5 range control
