Tài liệu Lập trình iphone chuyên nghiệp part 12 doc

Chapter 6: Advanced Programming Topics: Canvas and Video
140
Creating an Image Pattern
You can use an external image to create an image pattern on the back of a canvas element using the

createPattern()
method. The syntax is:
patternObject = context.createPattern(image, type)
The
image
argument references an
Image
object or else a different
canvas
element. The
type
argument
is one of the familiar CSS pattern types:
repeat
,
repeat-x
,
repeat-y
, and
no-repeat
. The method
returns a
Pattern
object, as shown in the following example:
function drawPattern(){
var canvas = document.getElementById(‘myCanvas’);

var context = canvas.getContext(‘2d’);
var pImg = new Image();
pImg.src = ‘images/tech.jpg’;
// call when image is fully loaded
pImg.onload = function() {
var pat = context.createPattern(pImg,’repeat’);
context.fillStyle = pat;
context.fillRect(0,0,300,300)
}
}
In this code, an
Image
object is created and assigned a source. However, before this image can be used in
the pattern, you need to ensure it is loaded. Therefore, you place the rest of the drawing code inside of the

Image
object’s
onload
event handler. Much like the gradient examples shown earlier, the
Pattern
object
that is created with
createPattern()
is then assigned to
fillStyle
. Figure 6-11 shows the results.
Adding Shadows
The
context
object provides four properties that you can use for defining shadows on the canvas:

❑

shadowColor
defines the CSS color of the shadow.
❑

shadowBlur
specifies the width of the shadow blur.
❑

shadowOffsetX
defines the horizontal offset of the shadow.
❑

shadowOffsetY
specifies the vertical offset of the shadow.
The following code uses these properties to define a blurred shadow for an image:
function drawImg(){
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
c06.indd 140c06.indd 140 12/7/07 2:48:25 PM12/7/07 2:48:25 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
141
context.shadowColor = “black”;
context.shadowBlur = “10”;
context.shadowOffsetX = “5”;
context.shadowOffsetY = “5”;
var img3 = new Image();
img3.src = ‘images/nola.jpg’;
img3.onload = function() {

context.drawImage( img3, 20, 30 );
}
}
Figure 6-11: An image pattern drawn on a canvas
c06.indd 141c06.indd 141 12/7/07 2:48:25 PM12/7/07 2:48:25 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
142
Figure 6-12 shows the result.
Figure 6-12: Shadow effects
Transforming a Canvas State
The
context
object has three methods you can use for transforming the state of a canvas:
❑

translate(x, y)
changes the origin coordinate (0,0) of the canvas.
❑

rotate(angle)
rotates the canvas around the current origin of a specified number of radians.
❑

scale(x, y)
adjusts the scale of the canvas. The x parameter is a positive number that scales
horizontally, while the y parameter scales vertically.
The following example uses
translate()
and
scale()

as it draws a circle successive times onto the
canvas. Each time these methods are called, their parameters are adjusted:
c06.indd 142c06.indd 142 12/7/07 2:48:25 PM12/7/07 2:48:25 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
143
function transform(){
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var s=1;
for (i=1;i<6;i++){
var t=i*8;
context.translate(t,t);
context.scale(s,s);
context.fillStyle = “rgba(“ + t*4 + “,”+ t*6 + “,” + t*8 + “, 0.3)”;
context.beginPath();
context.arc(50,50,40,0,2*pi , false);
context.fill();
s=s-0.05;
}
}
The
t
variable is
8
times the current iteration of the
for
loop, and then is used as the parameters for

translate()
. The

scale()
method uses the
s
variable, which is decremented by
0.05
after each pass.
The
fillStyle()
method also uses the
t
variable to adjust the
rgb
color values for each circle drawn.
Figure 6-13 shows the result of the transformation.
Figure 6-13: A series of transformed circles
c06.indd 143c06.indd 143 12/7/07 2:48:26 PM12/7/07 2:48:26 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
144
The
rotate()
method rotates the canvas based on the specified angle. For example, in the following
code, an image is drawn on the canvas three times, and each time the
translate()
and
rotate()

parameter values and the
globalAlpha
property are changed:
function rotateImg(){

var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
context.globalAlpha=”0.5”;
var r=1;
var img = new Image();
img.src = ‘images/jared.jpg’;
img.onload = function() {
for (i=1;i<4;i++) {
context.translate(50,-15);
context.rotate(.15*r);
context.globalAlpha=i*.33;
context.drawImage(img, 20, 20);
r+=1;
}
}
}
Figure 6-14 shows the layered result. Note the difference in transparency of the bottommost image to
the topmost.
Saving and Restoring State
When you begin to work with more advanced drawings on the canvas, you will need to manage the
drawing state. A drawing state includes the current path, the values of the major context properties (such
as
fillStyle
and
globalAlpha
), and any transformations (such as rotating) that have been applied.
To this end, you can use the
save()
and
restore()

methods. The
save()
method saves a snapshot of
the canvas, which can then be retrieved later using the
restore()
method. The
save()
and
restore()

methods enable you to return to a default drawing state with minimal additional code and without
needing to painstakingly recreate every setting.
Creating an Animation
You can use the context drawing capabilities discussed earlier in combination with JavaScript timer
routines to create animations on the canvas. On first take, the potential for creating canvas-based
animation sounds like a perfect lightweight substitute for Flash for iPhone and iPod touch. For some
purposes, it can be ideal. However, any such excitement needs to be kept in reasonable check. Perhaps
the chief shortcoming of the canvas drawing in JavaScript is that you need to repaint the entire canvas
for each frame of your animation. As a result, complex animations risk becoming jerky on the mobile
device. That being said, canvas animation can be a powerful tool to add to your development toolbox.
Like a motion picture or video clip, an animation is a series of frames that, when viewed one after the
other, gives the appearance of movement. Therefore, when you code, your job is to show a drawing,
clear it, draw the next frame in the series, clear it, and so on until your animation is completed or it loops
back to the start. If you are changing any context settings and need to reset them for each new frame,
you need to use the
save()
and
restore()
methods.
c06.indd 144c06.indd 144 12/7/07 2:48:26 PM12/7/07 2:48:26 PM