1. Canvas
L5 FT W!
H TM
Web Directions
South 2009
Dmitry Barano
vskiy
2. “The canvas element represents
a!resolution-dependent bitmap
canvas, which can be used for
rendering graphs, game graphics,
or other visual images on the fly”
HTML 5 Specification
32. var image = new Image;
image.onload = function () {
context.drawImage(image, x, y);
// or
context.drawImage(image, x, y, w, h);
// or
context.drawImage(image, sx, sy, sw, sh,
x, y, w, h);
};
image.src = "graffiti.jpg";
33. sy y
var image = new Image;
image.onload = sx
function () {
sh x h
context.drawImage(image, x, y);
// or
sw w
context.drawImage(image, x, y, w, h);
// or
context.drawImage(image, sx, sy, sw, sh,
x, y, w, h);
};
image.src = "graffiti.jpg";
35. var data = context.createImageData(w, h);
// or
var data = context.createImageData(old_data);
var data = context.getImageData(x, y, w, h);
context.putImageData(data, dx, dy);
// or
context.putImageData(data, dx, dy, x, y, w, h);