HTML and CSS Reference
In-Depth Information
case 107:
//+
currentScale+=scaleIncrement;
if (currentScale>maxScale){
currentScale = maxScale;
}
}
}
When testing
Example 4-15
, use the arrow keys to pan across the photo, and the +
and - keys to zoom in and out.
Pixel Manipulation
In this section, we will first examine the Canvas Pixel Manipulation API, and then build
a simple application demonstrating how to manipulate pixels on the canvas in real time.
The Canvas Pixel Manipulation API
The Canvas Pixel Manipulation API gives us the ability to “get,” “put,” and “change”
individual pixels utilizing what is known as the
CanvasPixelArray
interface.
ImageData
is the base object type for this manipulation, and an instance of this object is created
with the
createImageData()
function call. Let's start there.
The
createImageData()
function sets aside a portion of memory to store individual
pixels' worth of data based on the following three constructors:
imagedata = context.
createImageData
(sw, sh)
The
sw
and
sh
parameters represent the
width
and
height
values for the
Image
Data
object. For example,
imagedata=createImageData(100,100)
would create a
100×100 area of memory in which to store pixel data.
imagedata = context.
createImageData
(imagedata)
The
imagedata
parameter represents a separate instance of
ImageData
. This con-
structor creates a new
ImageData
object with the same width and height as the
parameter
ImageData
.
imagedata = context.
createImageData
()
This constructor returns a blank
ImageData
instance.
ImageData attributes
An
ImageData
object contains three attributes:
ImageData.height
This returns the height in pixels of the
ImageData
instance.
ImageData.width
This returns the width in pixels of the
ImageData
instance.
