Tài liệu Lập trình ứng dụng cho iPhone part 6 ppt

Canvas is a scalable vector graphics toolkit implemented as an HTML tag, with limited animation functionality accessible through JavaScript, that was created by This chapter covers: ■ Le

Using Canvas for web apps

We’ve already discussed two major ways to lay out high-quality iPhone web apps As

we described in chapter 4, you can create primarily text-based applications that use the new HTML extensions of the WebKit Alternatively, you can use a third-party library like iUI to create web pages that look a lot like iPhone native apps, as we showed in chapter 5

But what if you want to create graphical web apps for the iPhone, mirroring items like Clock, Stocks, and Weather? At first this might seem a little daunting, because we’ve already learned that we can’t use either Flash or SVG on the iPhone Fortunately, Apple has a ready-made answer: Canvas

Canvas is a scalable vector graphics toolkit implemented as an HTML tag, with limited animation functionality accessible through JavaScript, that was created by

This chapter covers:

■ Learning about Canvas

■ Using Canvas to draw simple shapes

■ Using Canvas for animations and other

complex graphics

Getting ready for Canvas

Apple It was originally created to build the Mac OS X dashboard utilities, but Canvas soon afterward made it into the WebKit (and thus into Safari) Apple has continued to support Canvas not just in mobile Safari, but also generally on the iPhone The afore-mentioned Clock, Stocks, and Weather utilities were all built using Canvas native to the iPhone, so it will be very simple for you to mimic the same functionality when you’re using Canvas on your web pages—you’ll be using the exact same tools as the widget designers for the iPhone

6.1 Getting ready for Canvas

Using Canvas on your iPhone is simplicity itself There’s nothing to download and no libraries to link in; it’s already part of the WebKit, as we learned in chapter 4 You just need to use Canvas-related markup and commands, which will then be correctly inter-preted by any Canvas-compliant browser In this section, we’re going to look at how to enable Canvas and maintain compatibility with other browsers at the same time, and then we’re going put it all together in an example We’ll kick things off with the all-important <canvas> tag

6.1.1 Enabling Canvas

The core of Canvas is the <canvas> tag, which defines a panel on your web page that will display Canvas output:

<canvas id="mycanvas" width=320 height=356></canvas>

The id isn’t required, but it’s helpful for referring to the Canvas object The widthand height attributes define the size of the Canvas object, just like similar attributes would for an <img> tag Note that we’ve chosen a 320x356 canvas, which happens to

be the size of the live area of an iPhone display in portrait mode

The graphics within the Canvas object will be entirely controlled by JavaScript To get access to them, you’ll need to use JavaScript to define a context for your Canvas object:

var canvas = document.getElementById('mycanvas');

var context = canvas.getContext('2d');

Note that though we define our context as being of type 2d, there isn’t any 3d context (or any other type for that matter) Canvas is expected to expand in that direction in the future

Unfortunately, using Canvas isn’t entirely that simple, and that’s because of the

many different browsers that exist on the World Wide Web

6.1.2 Ensuring compatibility

Before we go any further, let’s stop a moment and talk about compatibility If you’re working on an iPhone web app, you don’t have to worry too much about browsers other than mobile Safari You’ve probably already built fallbacks into your iPhone web apps so that users of Internet Explorer and other browsers won’t be able to access them, as we discussed in chapter 3

But Canvas applies to much more than just web apps You could use Canvas on your iPhone-friendly and iPhone-optimized pages too If you do use Canvas for more than just web apps, you’ll need to consider what other browsers Canvas runs on Although Canvas was originally an internal Apple language, it has since gained wider acceptance It has been incorporated into the WebKit and into the HTML 5 pro-tocol, and it has been implemented as part of the Gecko browser engine This means that it runs not only on Safari and mobile Safari, but also on Firefox version 1.5 or higher, on Opera version 9 or higher, and on the various WebKit clients that we’ve already discussed The holdout, as you’ve no doubt already sussed out, is Internet Explorer, which many of your users will unfortunately be using.

As a result, if your pages might be viewed by IE (or other, older browsers), you should put some compatibility text on your web page, and you must check for the presence of Canvas in your JavaScript

The compatibility text on your web page is simple Just put whatever you want IE

viewers to see inside the Canvas tag It’ll be invisible to users with Canvas, and it’ll

auto-matically display to those without:

<canvas id="mycanvas" width=300 height=300>

This page is meant to be displayed on a Canvas-compliant browser Please download <a href=http://www.apple.com/safari/download/>Safari</a> from Apple, or use a modern version of Firefox.

<body onload="drawOnCanvas();" leftmargin=0 topmargin=0>

<canvas id="mycanvas" width=320 height=356>

This page is meant to be displayed on a Canvas-compliant browser Please download <a href=http://www.apple.com/safari/download/>Safari</a> from Apple, or use a modern version of Firefox.

The only thing that’s new is what lies between them, a <body> tag This does two things: First, it sets an onload attribute, which makes sure that the JavaScript doesn’t try

to work with your Canvas object until it actually exists Second, it sets some margins so that your perfectly sized (320x356) Canvas object appears at the top left of your display This example also includes a viewport metatag, which should by now be standard for any iPhone work you’re doing Besides setting the viewport to a standard iPhone size for easy reading, this tag also prevents users from resizing the page, which has been pretty standard in our web apps

Now that you’ve got your basic coding structure in place, you can use it as the dation for all the additional Canvas work you’re going to do in this chapter

foun-6.2 Drawing paths

Canvas builds its drawings around paths, which

are collections of lines, arcs, and invisible moves

between them You create a new path by

describ-ing any number of these lines, and then you

fin-ish up the path by deciding how it’s going to

look, writing out your whole stack of commands

in the process Nothing gets printed to the

screen until you dump out everything with a

completion command This is all done with

JavaScript commands that you include as part of

a drawOnCanvas-like function, such as the one

we included in listing 6.1

All Canvas drawing is done on a

two-dimen-sional grid with an origin at the top left This is

depicted in figure 6.1

With these fundamentals of Canvas in hand,

you can now begin drawing

Runs when body

is loaded, with margins set

Defines Canvas object with a simple tag

• 150,50

• 50,150

• 250,250

Figure 6.1 Any Canvas object maintains its own two-dimensional grid.

6.2.1 Basic path commands

Table 6.1 lists the basic path commands They’re divided into three broad types: ation commands that get you going, draw commands that either draw or move while you’re working on a path, and completion commands that are used when you’re fin-ishing a path

cre-Listing 6.2 shows an example of how to use these commands to draw a simple banner This is just the first step in putting together a Canvas application Things will get more complex as we learn about additional methods

var context = canvas.getContext('2d');

You start by repeating the getContext line B from the

setup example The context is important because it’s the

object that gives you access to all of the drawing methods

For future examples, we’ll always assume that we have

defined a context by the name of context After creating

the context, you draw a path that defines an image, as

shown in figure 6.2

Any path must start off with a beginPath line C This

clears off the drawing stack and resets your virtual pencil to

the origin point of 0,0 As a result, most Canvas methods

Table 6.1 A variety of simple JavaScript commands help you create, draw, and finish basic Canvas paths

Method Type Variables Summary

beginPath Creation method Starts a new path

lineTo Draw method x,y Moves the virtual pencil visibly

moveTo Draw method x,y Moves the virtual pencil invisibly

closePath Draw method Completes a path by drawing back to the first point

fill Completion method Draws a path by filling in the space between

visible lines

stroke Completion method Draws a path by just drawing the visible lines

Listing 6.2 Simple Canvas commands draw quick two-dimensional shapes

B C

D E

F G

Figure 6.2 This simple banner was drawn with eight path commands.

Drawing paths

will follow the beginPath with a moveTo D, to get the virtual pencil to where you want

to start drawing without actually drawing anything in between

For this example, you next use a set of four lineTo methods E to draw an shape Because these are lines, they’ll display when you complete your path

The closePath F that ends the drawing is entirely optional It’s really just a hand way to draw a line between the final point that you explicitly designated and the point that you began drawing at

But none of this appears on the screen until you use a completion method G You can use stroke, as in this example, to just draw the line, or alternatively you can use fill, to color everything in Note that when you use a fill command, you don’t need

a closePath command; instead, Canvas will automatically close your shape for you

6.2.2 Curve commands

Once you’ve learned about lines, you’ve just got one other fundamental drawing tool

in Canvas: the curve Three different curve commands are available to you: the arc (which is available through two different methods), the quadratic curve, and the Bezier curve These are summarized in table 6.2

Each of these curves requires more explanation, because they work slightly differently and the two types of Bezier curves are somewhat complex

to avoid leaving behind an unsightly path

Second, arc defines everything in radians If you don’t remember your high school

geometry, 2π radians is a full circle, the same as 360 degrees Odds are that you’ll be thinking of things in terms of degrees, in which case you’ll have to multiply everything

by π/180 in order to convert

Table 6.2 Canvas supplies four methods for drawing curved paths.

Method Type Variables Summary

arc Draw method x, y, radius, startangle,

endangle, anticlockwise

Draws a circle or an arc of a circle

arcTo Draw method x1,y1,x2,y2,radius Draws an arc from point to point

quadraticCurveTo Draw method cpx,cpy,x,y Draws a quadratic Bezier curve

bezierCurveTo Draw method cpx1,cpy1,cpx2,cpy2,x,y Draws a cubic Bezier curve

Of the variables only the last, anticlockwise, requires any additional explanation It’s set to either true or false and defines the direction in which the circle is drawn from the start angle to the end angle Why “anticlockwise” instead of “clockwise,” you ask? It’s another standard when using radians.

Once you’ve got these basics, you can draw a circle The following example draws

a 33 radius circle centered at 150,150:

The results of this are shown in figure 6.3, which better

shows off some of the functionality we’ve been talking

about

Both of the arcs in figure 6.3 center around 150,150

with radiuses of 20 and 35 respectively They both run

from 0 degrees to 90 degrees, but the first one goes

anti-clockwise, resulting in three-quarters of a circle, while the

second goes clockwise, resulting in one-quarter of a circle

Simple calculation tells us that the first arc runs from 170,150 to 150,170 while the second runs from 185,150 to 150,185 If not for the moveTo in between them, a straight line would have been drawn from 150,170 to 185,150 as part of the path that you’re drawing If you’d like to test this out, just input the code, but leave out the moveTo method

THE ARCTO

Note that there is also a second command, arcTo, which can be used to draw arcs from one point to another It more closely matches the draw-to paradigm that you’ve used before, where you draw simple figures connecting one point to the next one

THE BEZIER CURVES

The two Bezier curves also match this draw-to paradigm: your virtual pencil is on the canvas and you’re drawing to another point But Bezier curves don’t necessarily draw very symmetric arcs

That’s pretty much the definition of a Bezier curve Each one has at least one trol point, which defines how the curve changes—whether it’s steep or shallow, and over which parts of the curve The quadratic Bezier curve (quadraticCurveTo) has

con-Figure 6.3 Two simple arcs are drawn around a central dot.

Drawing paths

one control point that connects to both endpoints, and the cubic Bezier curve (bezierCurveTo) has two control points, one per endpoint If you’ve ever worked with Adobe Illustrator, those lines that you drag off of the vertices of figures that you’ve drawn are control points that allow you to make Bezier curves

Listing 6.3 shows the commands required to draw two Bezier curves

We’ll offer one final caveat on these Bezier curves: they’re tricky to use The dratic curve can be used for some nice rounded corners without too much trouble, but figuring out what the cubic curve will look like is entirely trial and error If you’ve got a good drawing program that will let you accurately measure the positions of Bezier curves, you might want to use that as your whiteboard; otherwise you’ll need to keep inputting control points and seeing how they look on the screen

Lines and curves may be good, but how can you use them to draw actual stuff? As it happens, Canvas has a very limited selection of more complex shapes that you can draw, forcing you to often fall back on your ingenuity

Listing 6.3 Bezier curves allow for smooth arcs between two points

Figure 6.4 The Bezier curves (left) were drawn using the depicted control points (right).

context.clearRect(125,125,100,100);

context.strokeRect(150,150,50,50);

Note that in each of these method calls, the x,y

values define the top left of the rectangle, which is

then drawn out from that location The results are

shown in figure 6.5

We haven’t dwelled on it much so far, but shapes

in Canvas are drawn one on top of another, in the

order of invocation (or at least they are when you

use the default composition method, a topic we’ll

return to) Here, you drew a filled square (using the

fillstyle attribute of the context, which we’ll also

cover in a minute), then cleared the space, and

finally drew a stroked square atop it all

Note that the clearRect command effectively

acts as an eraser for a rectangle of space It’ll be useful when you’re drawing on top of other drawings, as you did here, or when you’re playing with animation down the line

6.3.2 Writing shape functions

Unfortunately, the rectangle is the only shape that is directly built into Canvas You can create a circle pretty simply using the arc command, but from there you’re

Table 6.3 Three rectangle commands allow simpler access to these shapes, without using paths.

Method Type Variables Summary

clearRect Integrated method x,y,width,height Clears the area

fillRect Integrated method x,y,width,height Draws a filled rectangle

strokeRect Integrated method x,y,width,height Draws a rectangle outline

Figure 6.5 A stack of three rectangles are drawn one atop another.

width = length * Math.sin(angle/2);

height = length * Math.cos(angle/2);

We’ve decided to define our rhombuses by the bottom-most point (x,y), the size

of the angle just above that point, in radians (angle), and the length of one of its sides (length) We’ve also included an option to fill or stroke the rhombus (style) Finally, with a bit of trigonometric magic (and, yes, we had to look that up too), we were able to draw a simplistic rhombus (with a very specific orientation) based on those properties

Here’s how our rhombus function could be put to use:

rhombus(context,100,100,25,45*Math.PI/180,'fill');

rhombus(context,150,100,25,90*Math.PI/180,'stroke');

The results are shown in figure 6.6

You’ll note that the unfilled rhombus is a

rotated square, another shape function that you

could write for Canvas The exact shapes you’ll

want to use in your graphical iPhone web apps

will probably vary, but they should be as easy to

program as this one

We’ve now completed our look at the basic

line-drawing functionality in Canvas, so the

next question is how to make those lines more

attractive

Listing 6.4 An example of a rhombus function

Figure 6.6 Our shape function allows for a variety of rhombuses to be drawn.

6.4 Creating styles: colors, gradients, and lines

Plain black lines aren’t going to cut it for an iPhone web app Fortunately, in Canvas it’s easy to modify your simple lines and fills by applying styles and changing other variables

6.4.1 Color styles

Separate styles can be used to modify the colors of fills and strokes These properties are summarized in table 6.4

Note that both fillStyle and strokeStyle affect the following fill (or stroke)

commands This means that the most recently input style will affect the entire path stack when it’s drawn Earlier ones will be ignored, so if you want to have different shapes with different styles, you’ll need to clear the stack after each one with a fill or stroke command

The actual color definition can be made via most CSS3 definitions You can use ognized words, #RGB values, rgb values, or even rgba values Here are four ways to set your fill style to red:

allow you to change the alpha transparency value of everything you’re drawing—but

the rgba command is more convenient for most usage (at least until you start saving and restoring states)

6.4.2 Gradient styles

Besides colors, you can also produce good-looking gradients in Canvas These are of particular note because gradients are used throughout the iPhone’s user interface Thus, using gradients will be a notable step toward creating an iPhone-like interface for your graphical web app Table 6.5 lists the methods required to create gradients; we’ll then apply them to fill (and stroke) styles, just like we did with basic colors The createLinearGradient and createRadialGradient methods each define how your gradient will be drawn With createLinearGradient you’re defining a

Table 6.4 By setting variables, you can choose how your fills and strokes look.

Property Type Value Summary

fillStyle Style variable CSS3 Color Sets subsequent fills to the color

strokeStyle Style variable CSS3 Color Sets subsequent strokes to the color