Advanced Programming
Topics: Canvas and Video The unique platform capabilities of iPhone and iPod touch enable developers to create innovative
applications inside of Mobile Safari that go beyond the normal “Web app” fare. Mobile Safari’s
support for the
canvas
element opens drawing and animation capabilities in an ordinary HTML
page that was previously available only by using Flash or Java. What’s more, deep inside the heart
of these two Apple devices lies the best portable audio and video media player that money can
buy. As an application developer, you can take advantage of these iPod capabilities by seamlessly
integrating multimedia into your mobile applications.
However, once you begin to open up these capabilities of Mobile Safari or the device itself, you
need to be sure that you are working with an iPhone and iPod touch rather than a desktop
browser. So, I’ll start by showing you how to identify the user agent for iPhone and iPod touch.
Identifying the User Agent
for iPhone and iPod touch
When you are trying to identify the capabilities of the browser requesting your Web site or
application, you generally want to avoid detecting the user agent and use object detection instead.
However, if you are developing an application designed exclusively for iPhone/iPod touch or
need Safari-specific features, such as
canvas
, then user agent detection is a valid option. Therefore,
this chapter assumes you are creating a Mobile Safari–specific application. Chapter 8 discusses
using media queries in general Web contexts.
c06.indd 121c06.indd 121 12/7/07 2:48:20 PM12/7/07 2:48:20 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
122
The Mobile Safari user agent string for iPhone closely resembles the user agent for Safari on other
platforms. However, it contains an iPhone platform name and the mobile version number. Depending on
iPod
as the platform:
Mozila/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Geckto)
Version/3.0 Mobile/3A101a Safari/419.3
The version numbers will change, obviously, when Apple updates Mobile Safari, but the string structure
stays the same.
To test to whether the device is an iPhone/iPod touch or not, you need to perform a string search on
iPhone
and
iPod
. The following function returns
true
if the user agent is either an iPhone or iPod touch:
function isAppleMobile() {
result ((navigator.platform.indexOf(“iPhone”) != -1) ||
(navigator.userAgent.indexOf(‘iPod’) != -1))
}
Be sure not to test for the string
Mobile
within the user agent, because a non-Apple mobile device (such
as Nokia) might be based on the WebKit-based browser.
If you need to do anything beyond basic user agent detection and test for specific devices or browser versions,
however, consider using WebKit’s own user agent detection script available for download at
trac.webkit
.org/projects/webkit/wiki/DetectingWebKit
. By linking WebKitDetect.js to your page, you can test
for specific devices (iPhone and iPod touch) as well as software versions. Here’s a sample detection script:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
addTextNode(‘Please upgrade your iPhone to the latest update before
running this application.’);
break;
}
case ‘iPod’ :
addTextNode(‘If this were a real app, I would launch its iPod touch
version.’);
default :
addTextNode( ‘This mobile device is not supported by this application.
Go to your nearest Apple store and get an iPhone.’);
}
}
else {
addTextNode( ‘Desktop computers are so 1990s. Go to your nearest Apple store and
get an iPhone.’ );
}
</script>
</html>
With the WebKitDetect.js script included, the
WebKitDetect
object is accessible. Begin by calling its
isMobile()
method to determine whether the device is or is not a mobile device. Next, check to ensure
that the mobile version is the latest release and save that result in the
minSupport
variable. The
switch
statement then evaluates the mobile devices. If it is an iPhone, then it checks to see if
(WHATWG) specification for HTML 5.0.
The canvas frees you up as an application developer to not only draw anything you want to, but also to
use canvas as a way to render graphs, program games, or add special effects. On Mac OS X, the canvas is
often used for creating Dashboard widgets. On iPhone, Apple makes use of the canvas for both the Clock
and Stocks built-in applications.
Canvas programming can be a mindset difference for Web developers used to manipulating existing
graphics rather than creating them from scratch. It is the loose equivalent of a Photoshop expert
beginning to create content using an Adobe Illustrator–like program in which all of the graphics are
created in a nonvisual manner.
Defining the Canvas Element
The canvas is defined using the
canvas
element:
<canvas id=”theCanvas” width=”300” height=”300”/>
Except for the
src
and
alt
attributes, the
canvas
element supports all of the same attributes as the
img
tag. However, the
id
,
width
, and
height
attributes are not required, but should be defined as a sound
context
object. The
context
object has many properties (see Table 6-1 ) that determine how the drawing looks on the page.
c06.indd 124c06.indd 124 12/7/07 2:48:21 PM12/7/07 2:48:21 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
125
Table 6-1: Context Properties
Property Description
fillStyle
Provides CSS color or style (gradient, pattern) of the fill of a
path.
globalAlpha
Specifies the level of transparency of content drawn on the
canvas. Floating point value is between 0.0 (fully
transparent) and 1.0 (fully opaque).
globalCompositeOperation
Specifies the compositing mode to determine how the
canvas is displayed relative to background content.
Values include
copy
,
darker
,
destination-atop
,
destination-in
,
destination-out
round
,
bevel
,
miter
. (Defaults to
miter
.)
lineWidth
Specifies the line width. Floating point value is greater than 0.
miterLimit
Specifies the
miter
limit for drawing a juncture between
line segments.
shadowBlur
Defines the width that a shadow covers.
shadowColor
Provides CSS color for the shadow.
shadowOffsetX
Specifies the horizontal distance of the shadow from the
source.
shadowOffsetY
Specifies the vertical distance of the shadow from the source.
strokeStyle
Defines the CSS color or style (gradient, pattern) when
stroking paths.
Drawing a Simple Rectangle
There are several techniques for drawing on the canvas. Perhaps the most straightforward is by drawing
a rectangle. To do so, you work with three context methods:
Copyright: Tài liệu đại học ©