Getting Started with Canvas
49K - views

Getting Started with Canvas

Similar presentations


Download Presentation

Getting Started with Canvas




Download Presentation - The PPT/PDF document "Getting Started with Canvas" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.



Presentation on theme: "Getting Started with Canvas"— Presentation transcript:

Slide1

Slide2

Getting Started with Canvas

Leon Braginski

Senior Program Manager

Microsoft

Corporation

Slide3

Objectives

Learn about the HTML 5 canvas element

Learn how to combine canvas

with images and videos

to achieve

animation effects

Slide4

Agenda

Overview of canvas

Basic usage

Drawing shapes

Drawing images and videos

Using transforms

Creating animations

Slide5

Introducing the Canvas Element

Slide6

Overview of Canvas

Is an immediate mode drawing surfaceUses canvas context APIs to draw shapes, gradients, images, paths, or other objectsCan be combined with JavaScript to create animations

Slide7

Canvas versus SVG

How it works

Canvas

SVG

Drawing Mode

Immediate

Retained

DOM Support

<CANVAS>

is part of the DOM

Each

SVG element is part of the DOM

Animation

Using

direct scripting in canvas

Manipulating objects

in

the DOM

GPU Acceleration

Yes

Yes

When to use

Programmatic rendering

,

games

Highly detailed drawings, charts

Slide8

Canvas in Three Easy Steps

<html> <body>

<

canvas id="

myCanvas

" width="500" height="500">

Canvas is not supported.

</canvas

>

</body> </html>

<

script language=

javascript

>

myCanvas

=

document.getElementById

("

myCanvas

");

if

(

myCanvas.getContext

)

{

ctx

=

myCanvas.getContext

("2d

");

ctx.arc

(50, 50, 30, 0,

Math.PI

*2, true);

ctx.fillStyle

= "

rgba

(0, 162, 232, .5)";

ctx.fill

();

</script>

Slide9

Canvas Primitives

Coordinate systemRectangular shapesLinesArcs – can be used to draw circlesCurvesPaths – are combinations of primitives

0

Y

width

y

X

0

x

height

Slide10

Canvas Primitives (cont.)

GradientsShadowsFontsLots more!

Slide11

Canvas Transforms

You can scale, rotate, translate, or apply custom transformsCanvas transforms are offloaded to the GPU

Slide12

Canvas Basics

demo

Slide13

Combining Canvas and Video

Canvas can be easily combined with a video tagCanvas can be overlaid on top of a video element

Slide14

Combining Canvas and Video

<video id="

myVideo

"

src

="fish.mp4" height="480" width="640"autoplay controls loop>

</

video>

<

canvas id="

myCanvas

" height="480" width="640" style="left: 0px; top: 0px; position: absolute;" >

</

canvas

>

<script language=

javascript

>

myCanvas

=

document.getElementById

("

myCanvas

");

if

(

myCanvas.getContext

) {

ctx

=

myCanvas.getContext

("2d");

ctx.font

= '35px "Segoe UI" bold

';

}

setInterval

(draw

, 16

);

function

draw () {

y1

+= distance;

ctx.clearRect

(0

, 0,

ctx.canvas.width

,

ctx.canvas.height

);

ctx.fillText

(

customText

, 60, y1

);

}

</script>

Slide15

Using Video in a Canvas Context

<video id="

myVideo

"

src

="fish.mp4" loop style="display: none

">

<canvas id="

myCanvas

" height="480" width="640" style="left: 0px; top: 0px; position: absolute;" >

</canvas>

<script language=

javascript

>

myCanvas

=

document.getElementById

("

myCanvas

");

myVideo

=

document.getElementById

("

myVideo

");

myVideo.play

();

myTimer

=

setInterval

(

drawVideo

, 16

);

function

drawVideo

() {

ctx.drawImage

(

myVideo

, 0, 0, 480, 640);

}

</script>

Slide16

Benefits of Using Video in a Canvas Context

Ability to apply any canvas transform

Ability to manipulate pixels directly

(not optimized in

Internet Explorer 9 Beta)

Example: you can separate a specific color from each frame

Slide17

Video and Overlaid Canvas, Video in Canvas Context

d

emo

Slide18

Combining Canvas and Images

Canvas + images = a graphically rich websiteImages rendered on the canvas are greatfor animation

Slide19

Using Canvas for Animation

Slide20

Animating Canvas with Images

Basic animation steps:Render an imageon canvasClear canvasRepeat

Slide21

Two types of animationFrame-basedTime-based

Canvas Animation

Slide22

Objects are moved the same number of pixels every updateMachine dependentFaster machine = faster animationSlower machine = slower animationSimple to implement

Frame-Based Animation

Slide23

Frame-Based Animation

var

distance

=

5

,

lastFrameTime

=

0

;

setInterval

(

drawTimeBased

,

16

);

function

drawFrameBased

() {

y1

+=

distance

;

ctx

.

clearRect

(

0

,

0

,

ctx

.

canvas

.

width

,

ctx

.

canvas

.

height

);

ctx

.

drawImage

(

img

,

x1

,

y1

,

imgWidth

,

imgHeight

);

}

Slide24

Objects are moved the same number of pixels per unit of timeNot machine dependentFast machine = smoother animationSlower machine = jerkier animationUsed in games – ensures animation is completed in a set length of time

Time-Based Animation

Slide25

Time-Based Animation

var

speed

=

250

,

lastFrameTime

=

0

;

setInterval

(

drawTimeBased

,

16

);

function

drawTimeBased

() {

// time since last frame

var

now

=

new

Date

().

getTime

();

dt

= (

now

-

lastFrameTime

) /

1000

;

lastFrameTime

=

now

;

y2

+=

speed

*

dt

;

ctx

.

clearRect

(

x2

,

0

,

ctx

.

canvas.width

,

ctx

.

canvas

.

height

);

ctx

.

drawImage

(

img

,

x2

,

y2

,

imgWidth

,

imgHeight

);

}

Slide26

Best Practice: Drawing anImage Cell

fishH

fishW

sY

sX

Slide27

Drawing a Single Image Cell

<

img

id="

imageStrip

"

src

="fishstrip.png" style="display

: none"

tabIndex

="-1">

// get image strip

imageStrip

=

document.getElementById

('

imageStrip

');

ctx.drawImage

(

// source image information

FishImageStrip

, // source

fishW

* cell, //

sX

of the fish cell

fishH

* species, // SY of the fish cell

fishW

, // cell width

fishH

, // cell height

// Canvas Destination

x, // X where to draw fish

y, // Y where to draw fish on canvas

fishW

, // destination width

fishH

, // destination height

);

Slide28

Rendering an Animation Cell from a Sprite

demo

Slide29

Making it More Interesting: Animating Canvas with Images

Load the backgroundLoad the entire image spriteTransform canvas (scale, translate)Render specific cell from the stripRepeat steps 3-5

Slide30

Animating a Canvas with Images

var

myCanvas

=

document.getElementById

('

myCanvas

');

var

ctx

=

myCanvas.getContext

("2d

");

ctx.save

();

ctx.translate

(x

, y);

ctx.scale

(scale

, scale);

ctx.transform

(flip

, 0, 0, 1, 0, 0

);

ctx.drawImage

(

imageStrip

,

fishW

* cell,

fishH

*

species

,

fishW

,

fishH

, -

fishW

/ 2, -

fishH

/

2,

fishW

,

fishH

);

...

ctx.restore

();

Slide31

Completing the Fish Tank Example

demo

Slide32

Call to Action

Use the HTML5 canvas element to build graphically rich websites

Combine canvas with images and videos to achieve animation effects

Avoid canvas direct pixel manipulation in Internet Explorer 9 Beta

Fill out the evaluation form for this presentation

Slide33

Resources

HTML5 Canvas 2D Context

http://

dev.w3.org/html5/2dcontext/

Canvas blog

http://

blogs.msdn.com/b/ie/archive/2010/07/01/ie9-includes-hardware-accelerated-canvas.aspx

Related Windows Summit

sessions:

Internet Explorer 9 Overview

Internet

Explorer 9 Overview (Update

)

Easier

Web Development Using Internet Explorer 9 Developer Tools

Internet

Explorer 9 Desktop Integration Using Pinning

Best

Practices for Advanced Graphics in Internet Explorer

9

Getting Started with

SVG

Touch Support in Internet Explorer

9

Slide34

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Slide35

Slide36

Slide37

Slide38

Slide39