28-绘制图像窗口

4.7.2　绘制图像窗口

为绘制图像窗口，只需更改标准的context.drawImage()函数调用，使用刚刚定义的4个变量值。

context.drawImage(photo, windowX, windowY, windowWidth, windowHeight, 0, 0,
　　　　　　　　 　　windowWidth,windowHeight);

仔细观察，可以看出这个为刷新器，看看drawImage()函数操作是如何进行的。数值按顺序传送。

• photo：图像实例将用作绘制到画布上的源。
• windowX：开始复制源图像的左上角的x坐标。
• windowY：开始复制源图像的左上角的y坐标。
• windowWidth：开始复制源图像的矩形的宽度。
• windowHeight：开始复制源图像的矩形的高度。
• 0：画布上图像目标位置左上角的x坐标。
• 0：画布上图像目标位置左上角的y坐标。
• viewPortWidth：目标复制的宽度，以像素为单位（更改它的值，可以用来缩放图像）。
• viewPortHeight：目标复制的高度，以像素为单位（更改它的值，可以用来缩放图像）。

当图像绘制到画布上时，通过更改windowX和windowY的值可以创建平移效果。例4-11说明了如何将图像放到画布上，同时将窗口位置设置为（0，0），其输出结果如图4-12所示。

例4-11　在逻辑窗口中将一个图像放置到画布上

var photo = new Image();
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "butterfly.jpg";
var windowWidth = 500;
var windowHeight = 500;
var viewPortWidth=500;
var viewPortHeight=500
var windowX = 0;
var windowY = 0;
function eventPhotoLoaded(){
　　drawScreen()
}
function drawScreen(){
　　　　context.drawImage(photo, windowX, windowY, windowWidth, windowHeight,
　　　　　　　　　　　　　 　0, 0, viewPortWidth,viewPortHeight);
}