HTML5 Canvas入门指南：创造动态网页视觉

需积分: 9 129 浏览量更新于2024-07-19 收藏 21.04MB PDF 举报

《HTML5 Canvas for Dummies》是一本实用的入门级教程，专为初级到中级的网页程序员、开发人员和设计师设计，帮助他们掌握HTML5标准中的强大Canvas标签。HTML5 Canvas是HTML5的一部分，它允许开发者在JavaScript中无需第三方工具或播放器，实时地在移动和常规网站上添加图像、动画和声音，实现动态视觉效果。本书以用户友好的方式介绍了Canvas的基本概念，不设防地引导读者学习如何充分利用这项技术。内容包括但不限于以下几个关键知识点： 1. **Canvas标签入门**：首先，读者将了解Canvas标签的工作原理和在HTML5文档中的应用，学习如何正确嵌入和初始化这个元素。 2. **2D绘画与图像处理**：通过实例演示，读者将学会如何在Canvas上绘制线条、形状、填充颜色以及处理位图图像，理解基础的图形操作。 3. **视频和音频集成**：书中会介绍如何在Canvas上嵌入视频和音频，实现多媒体内容的交互式体验，增强用户的参与度。 4. **游戏开发基础**：通过构建基本的游戏框架，读者可以学习如何利用Canvas实现简单的游戏逻辑，如碰撞检测和动画控制。 5. **动画魔法**：书中涵盖了如何运用Canvas创建流畅的动画，包括帧动画、逐像素动画等，使网页内容更具吸引力。 6. **JavaScript基础知识**：为了让读者更好地理解Canvas的使用，书中还提供了一个简明的JavaScript教程，确保在使用Canvas时具备必要的编程技能。《HTML5 Canvas for Dummies》是一本易于跟随的指南，无论是初次接触HTML5 Canvas的开发者，还是希望提升技能的专业人士，都能从中获得所需的实践指导。通过这本书，读者能够迅速上手，并将其应用到自己的项目中，创造出令人惊艳的动态网页体验。

xiv

HTML5 Canvas For Dummies

Using Text Editors ......................................................................................... 31

Standard text editors ........................................................................... 31

Alternatives to standard text editors ................................................ 32

Saving HTML5 Canvas application les ............................................ 34

Using Code Debuggers .................................................................................. 35

Firefox Firebug ..................................................................................... 35

Firerainbow ........................................................................................... 37

Other browsers’ debugging tools ...................................................... 37

Part II: Drawing on Canvas ......................................... 39

Chapter 3: Creating Objects ....................................41

Positioning Objects on a Canvas ................................................................. 41

Dening a web page to hold your Canvas.........................................41

Dening your Canvas ........................................................................... 44

Absolute positioning ........................................................................... 47

Relative positioning ............................................................................. 48

Drawing Rectangles ....................................................................................... 50

Dening Object Attributes ............................................................................ 51

Colors .................................................................................................... 53

Gradients ............................................................................................... 56

Patterns ................................................................................................. 61

Transparency ....................................................................................... 64

Shadows ................................................................................................ 66

Clipping ................................................................................................. 68

Displaying Text .............................................................................................. 70

Font attributes ...................................................................................... 70

Text baseline ........................................................................................ 71

Text alignment......................................................................................74

Drawing Lines ................................................................................................. 76

Line attributes ...................................................................................... 77

Line caps ............................................................................................... 78

Line joins ............................................................................................... 78

Line construction ................................................................................. 78

Chapter 4: Enhancing Objects ..................................81

Drawing Multi-Sided Shapes ......................................................................... 81

Drawing Curves .............................................................................................. 85

Arcs ........................................................................................................ 85

Circles .................................................................................................... 89

Rounded corners ................................................................................. 92

Bezier curves ........................................................................................ 95

Quadratic curves ................................................................................. 97

Multi-segment curves ........................................................................ 100

Table of Contents

Compositing Objects ................................................................................... 102

Compositing options ......................................................................... 105

Creating a table to hold the examples ............................................ 106

Drawing the composite shapes ........................................................ 106

Randomizing Shapes ................................................................................... 107

Displaying Images ........................................................................................ 110

Chapter 5: Transforming Objects...............................115

Translating ................................................................................................... 115

Saving Canvas States ................................................................................... 118

Scaling ........................................................................................................... 119

Mirroring ....................................................................................................... 121

Rotating ......................................................................................................... 125

Applying a Transform Matrix ..................................................................... 129

Scaling objects ................................................................................... 132

Skewing objects .................................................................................. 132

Translating objects ............................................................................ 133

Chapter 6: Moving Objects ....................................135

The Basics of Movement ............................................................................ 135

Using multiple Canvas elements ...................................................... 137

Creating the background .................................................................. 138

Drawing a moving object .................................................................. 139

Creating Circular Motion ............................................................................ 141

Basic aspects ...................................................................................... 143

Unique aspects ................................................................................... 144

Creating Oscillation ..................................................................................... 144

Basic aspects ...................................................................................... 148

Unique aspects ................................................................................... 149

Adjusting Movement for Acceleration, Gravity, Friction, and Bounce ...... 151

Basic aspects ...................................................................................... 156

Unique aspects ................................................................................... 157

Part III: Breathing Life into Your Canvas ................... 169

Chapter 7: Mastering the Art of Canvas .........................171

Creating Appealing Canvas Spaces ........................................................... 171

Choosing the size and proportions of your Canvas ...................... 172

Resizing and rescaling your Canvas ................................................ 172

Dividing your Canvas with the rule of thirds ................................. 176

Using the golden ratio in your design ............................................. 177

xvi

HTML5 Canvas For Dummies

Creating Complex Shapes and Images ...................................................... 179

Basic aspects ...................................................................................... 185

Key aspects ......................................................................................... 185

Getting the Most Out of Color .................................................................... 187

Using online color tools .................................................................... 187

Combining colors ............................................................................... 189

Creating Textures ........................................................................................ 190

Chapter 8: Introducing User Interaction.........................193

Responding to User Events ........................................................................ 193

The Document Object Model (DOM), event listeners,

and callbacks .................................................................................. 202

Event listener response areas .......................................................... 203

DOM event denitions ....................................................................... 205

Canvas event listeners ...................................................................... 205

Browser window event listeners......................................................206

Handling Key Events ................................................................................... 206

Discovering key codes ...................................................................... 207

Handling a key press ......................................................................... 208

Handling Mouse Events .............................................................................. 209

Dragging and Dropping Objects ................................................................ 210

Mouse down events ........................................................................... 211

Mouse move events ........................................................................... 212

Mouse up events ................................................................................ 213

Displaying Information for the User .......................................................... 214

Chapter 9: Creating Engaging Imagery and Motion ...............217

Developing an Application Look and Feel ................................................ 217

Dening dimensions of appearance and motion ........................... 224

Dening the visual dimensions of your application ...................... 224

Using an image as a background......................................................227

Prompting User Interaction ........................................................................ 228

Using motion to attract attention .................................................... 228

Responding to interaction ................................................................ 229

Managing Animations .................................................................................. 230

Animation frame rates ....................................................................... 230

Dening your animation control function ...................................... 231

Dening your main animation drawing function ........................... 235

Calculating and displaying the animation frame rate ................... 235

Moving objects at controlled speeds .............................................. 236

Dening and storing image sequences ............................................ 237

Moving images across a background .............................................. 239

xvii

Table of Contents

Testing Browser Animation Performance ................................................ 241

Creating the base code......................................................................246

Dening an animation control function to stress the browser .... 246

Drawing browser performance stressing images .......................... 247

Chapter 10: Sounding Off with Audio ...........................249

Including Audio in Your Canvas Application ........................................... 249

Creating Audio Recordings ........................................................................ 257

Recording or downloading audio .................................................... 257

Creating supported audio le types ................................................ 258

Controlling Audio Recordings .................................................................... 258

Audio attributes ................................................................................. 259

Audio functions .................................................................................. 261

Audio events ....................................................................................... 262

Dening Audio Elements ............................................................................. 263

Dening audio elements using HTML tags ..................................... 263

Dening audio elements with JavaScript code .............................. 265

Responding to User Interaction ................................................................. 266

Responding to Canvas area interaction .......................................... 266

Responding to audio player interaction ......................................... 270

Dening Other Application Components ................................................. 270

Part IV: Developing More Complex Applications .......... 273

Chapter 11: Grabbing Attention with Video......................275

Including Video in Your Application ......................................................... 275

Creating Video Recordings ......................................................................... 283

Recording or downloading your video ........................................... 284

Creating supported video le types ................................................ 284

Controlling Video Recordings .................................................................... 285

Video attributes ................................................................................. 286

Video functions .................................................................................. 287

Video events ....................................................................................... 288

Dening Video Elements ............................................................................. 289

Dening elements using HTML tags ................................................ 289

Dening elements using JavaScript code........................................291

Using Animation to Draw Video Frames ................................................... 292

Starting the video ............................................................................... 292

Setting up the animation loop .......................................................... 292

Drawing the video images ................................................................. 293

xviii

HTML5 Canvas For Dummies

Responding to User Interaction ................................................................. 295

Responding to Canvas area interaction .......................................... 295

Responding to video player interaction ......................................... 298

Dening Other Application Components ................................................. 299

Chapter 12: Enhancing Canvas Applications ....................301

Aspects of Enhancement ............................................................................ 319

Reasons for enhancement ................................................................ 319

Techniques of enhancement ............................................................ 319

Application of enhancement ............................................................ 320

Constructing an Application Base ............................................................. 320

On load function ................................................................................ 320

Animation setup function ................................................................. 320

Animation loop ................................................................................... 321

Drawing function ................................................................................ 321

Object movement...............................................................................321

Object drawing ................................................................................... 321

Playing audio ...................................................................................... 322

User interaction ................................................................................. 322

Enhancing Background Canvas Layers ..................................................... 322

Shading a background ....................................................................... 322

Creating reected light on a background ....................................... 323

Creating simulated background movement ................................... 324

Creating Multiple and Multifaceted Objects ............................................ 325

Storing variables in an array ............................................................ 325

Using randomized object characteristics ....................................... 326

Spawning new objects ....................................................................... 328

Creating Object Tails ................................................................................... 329

Creating Layered Audio .............................................................................. 330

Managing Performance ............................................................................... 332

Part V: The Part of Tens ............................................ 333

Chapter 13: Ten Great Canvas Applications .....................335

Bomomo ........................................................................................................ 335

Canvas Cycle ................................................................................................ 336

Chrome Experiments .................................................................................. 336

Grow a Face .................................................................................................. 337

Burn Canvas ................................................................................................. 337

Canvas Sketch .............................................................................................. 337

Canvas 3D Engine ........................................................................................ 337

剩余386页未读，继续阅读

sinat_21954747

粉丝: 0
资源: 24

HTML5 Canvas入门指南：创造动态网页视觉

HTML5 Canvas For Dummies 无水印原版pdf

HTML5 For Dummies

HTML 5 Game Development For Dummies

Html5 Game Development for Dummies

HTML5 Game Development For Dummies电子书

HTML5.Game.Development.For.Dummies.pdf

html5 pocket quick reference

Html5CanvasForDummies.pdf 英文原版

HTML5 & CSS3 入门 傻瓜书 (英文版)

html,xhtml和css从入门到精通

最新资源

HTML5 & CSS3 入门傻瓜书 (英文版)