Chapter 6: Advanced Programming Topics: Canvas and Video
131
Drawing an Image
In addition to lines and other shapes, you can also draw an image onto your canvas by using the
drawImage()
method. The image can reference either an external image or another canvas element on
the page. There are actually three ways in which you can call this method. The first variant simply draws
an image at the specified coordinates using the size of the image:
context.drawImage(image, x, y)
The second method enables you to specify the dimensions of the image with the
w
and
h
arguments:
context.drawImage(image, x, y, width, height)
To do a basic image draw, define the
Image
object and assign an
src
. Next, you want to draw the image,
but only after you are certain the image is fully loaded. Therefore, the
drawImage()
method is placed
inside of the image’s
onload
handler:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
option that is slightly more complex:
context.drawImage(image, sourcex, sourcey, sourceWidth, sourceHeight, destx, desty,
destWidth, destHeight)
In this variant, the method draws a subsection of the image specified by the source rectangle (
sourcex,
sourcey, sourceWidth, sourceHeight
) onto a destination rectangle specified by the final arguments
(
destx, desty, destWidth, destHeight
). For example, suppose you just wanted to display the
rock thrower in Figure 6-4 rather than the entire picture. Using this expanded syntax of
drawImage()
,
you want to extract a 79 × 131px rectangle from the original picture starting at the coordinate
(151, 63). You then paint the same sized rectangle at coordinate (10, 10) on the canvas. Here is the
updated code:
function drawImg(){
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var img = new Image();
c06.indd 132c06.indd 132 12/7/07 2:48:23 PM12/7/07 2:48:23 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
133
img.src = ‘images/beach.jpg’;
img.onload = function() {
context.drawImage( img, 151, 63, 79, 131, 10, 10, 79, 131 );
}
}
Figure 6-5 shows the result.
Figure 6-5: Painting a portion of an image
‘8MYKuOPIADMk8AOKft7a7EzIxZOnlkAfHG5j6uacjpbQlpVlJuh28fTRWVtb3rD/AFB6OsUFCI/nl3eV’ +
‘VeNRNnCXgTbkcxVbm/H5kaBn09jNcwQNuomPZFLdPJDWudiGRsqCa0zPsUKW7nlFCQxnFjAGtFewLZv9’ +
‘Y3EOxWt4yxtRNPM+Jw0DSTG0fM0tpj5lRyerdzeySLo2jYpfijFtHT3hbcleNKqXI9JhV7mPFfls7N8S’ +
‘w4l27YfQoySSTmTxS0XONXF1AKmtAKDwCTCq5TqDM0jm6SQRliATQDTnRABRKEqG2wwhF3euK5AAkJT7’ +
‘lyRACJOK4lCD5jjkgQYxNEkhp5R4pNWkVGaCpOJzKcBIuCRKkOaBirqmlOGdF1SuwSGenAp+U/IPco4K’ +
‘duHhls9xya0krZHP0Kbc7k9Nlow4yCslPw8vFdZQgDLioUTnTSumdm817hwVrbUHgsnlnVVbak6BoACl’ +
c06.indd 134c06.indd 134 12/7/07 2:48:23 PM12/7/07 2:48:23 PM
Chapter 6: Advanced Programming Topics: Canvas and Video
135
‘tywUWM44J8O9ipCZz60VLvc/Tt3mvBWssoaM1nN3c65kZA3OV7WD/caIYkZ6/wBpvdvbFJcN8l03qxyD’ +
‘I6vNpPaFDIBHby5r1q9261vLF1jcN1RaQ0c2loo1ze0LzDddtn2y8fazCtMWP4PacnBJCsoK84Yc8ihJ’ +
‘4HNE7t45psk6gDmEyGeibFul7snoqO7tdIDhcyOLhUdR0sUMOHZ5lVbDvO4Xd/fyXtw+461lOJNZqMhS’ +
‘jchSvBO31yGf4422AHGa5fXuY6R32kLP7XeiyuxM8F0T2vilAz0SN0mnaM12X5HW3Cpaqq1b7ZOKnErU’ +
‘57bU7O9kn1wzf7fBt9pDPudwDNdbna6YoWsLi2GFjWSup/E6lexQrR8M/pq93G7gbd3AdNBFduYGOdEG’ +
‘lzHUAwAJIw7lQWPq7dba4MshbdQuPmhkGAYRpc2NwoWVbhhgrrbmnfrXc4LS5kc6b6ZvSdGyJsMQkNWM’ +
‘axxaaCuQFfFaU5aXxTWLe3u9ZMr8N+NbrvE19yelU4jwKpkcMVtbXWirLG0bcVPGaSWRsbSPzmvc1X+3’ +
‘emYtw2fZru9A0NdNeX9w8+YxF3Uax1eD8yqrcd22yz3C92qe1N3tzGQWvy39N4NsDVzTjm5xVZuXqndL’ +
‘xs9tFK6322UgMtGkUaxrQxrNVK0o3FZ7+Ljb3e6Ft2r/ACX6YNdnNyJbfZL3bn/jZaefuZ6BZ+p9svLG’ +
‘43Nhi+rtnTR2keHUERLWMcWA6tJzPYsp61sWTGHeLZ8cwlAivei7W1k1ARjn5gciskCpdhul/t7nus5j’ +
‘D1BpkAALXDhVrgRUcCov+WuSuy9YT6rv3gvj/D+1ffx2yuj0jtJO3d4isLHbqaZbQPM7eIllDZHA9orp’ +
‘8FUpQ/W8ulJLnnU5+bqnEnE41SEAU0mtQCcKUPJc17bnPTReSwdVK7axq8tvxeWcVyTilUFnLly5AHJC’ +
‘lJQlAjkhPtSoCUwEJQB2LkvFNu8rimhMPVq8EtUDCKdiJApCqhOaXguSKOCVCi4I6h0P/9k=’;
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);
var img = new Image();
img.src = img_src;
img.onload = function() {
context.drawImage( img, 10, 10 );
}
}
Copyright: Tài liệu đại học ©