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

html5

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

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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 canvas 开发详解 pdf

html5 canvas 遮罩,HTML5 Canvas视频背景+图片透明遮掩层

html5 canvas 开发详解 例子下载

uniapp h5 html2canvas

Html5 canvas全景交互

canvas配合html2canvas

html canvas 开发工具

html5 canvas画布绘图logo

html5canvas位置

html5 图片文字提取,HTML5 Canvas：获取canvas内容-toDataURL()

html 萤火虫特效,html5 canvas逼真的夜幕森林萤火虫动画

html canvas 水平翻转,html5 canvas 图片水平翻转

html2canvas 内嵌h5代码

html转换成canvas文字空白,HTML5 Canvas toDataURL返回空白

html5 canvas做批改作业

html5 canvas 拼图游戏代码

js 导入 jspdf html2canvas 在线脚本 后 提示没有html2canvas方法

vue h5 使用html2canvas

最新资源

html5 canvas 开发详解例子下载

js 导入 jspdf html2canvas 在线脚本后提示没有html2canvas方法