html5绘图 事件,6.5 为图像附加事件监听器 - HTML5 Canvas 实战

本节，我们将为图像附加事件监听器。在使用Events类时，我们只能为路径附加事件监听器，而画布上绘制的图像不属于路径的范畴，我们可以创建一个覆盖在图像上矩形区域，以便能为这个矩形区域附加事件，其结果就是为图像附加事件监听器。

图6-4 为图像添加事件监听器

操作步骤

按照以下步骤，绘制两个不同图像，并为它们附加mouseover, mouseout, mousedown, 和mouseup事件监听器：

1. 链接到Events类：

2. 定义writeMessage()函数，该函数输出一条消息：

function writeMessage(context, message){

context.font  = "18pt Calibri";

context.fillStyle  = "black";

context.fillText(message,  10,  25);

}

3. 创建一个图像加载函数，该函数先加载一组图像，然后，每当所有图像都加载完成，就调用callback函数：

/* 加载一组图像，当所有图像都加载完成后，以这组图像对象为入参，调用callback函数 */

function loadImages(sources, callback) {

var loadedImages  =  0;

var numImages  =  0;

var images  =  {};

//获取sources中图像的数目

for  (var src in sources)  {

numImages++;

}

//加载图像

for  (var src in sources)  {

images[src]  = new Image();

images[src].onload  = function(){

// 所有图像加载完成后，调用callback函数

if  (++loadedImages  >= numImages)  {

callback(images);

}

};

images[src].src  = sources[src];

}

}

4. 定义drawImages()函数，该函数实例化一个Events对象，并开始定义stage()函数：

function drawImages(images){

var events  = new Events("myCanvas");

var canvas  = events.getCanvas();

var context  = events.getContext();

var message  = "";

events.setStage(function(){ this.clear();

5. 开始一个新区域，绘制左边的图像，定义一个矩形区域来表示图像路径，为矩形区域附加事件监听器，再关闭路径。重复上述步骤绘制右侧的矩形。然后，输出一条消息：

this.beginRegion();

context.drawImage(images.challengerImg,  50,  70,  240, 143);

//为图像绘制矩形区域

context.beginPath();

context.rect(50,  70,  240,  143);

context.closePath();

this.addRegionEventListener("mouseover", function(){

message  = "Dodge Challenger mouseover!";

});

this.addRegionEventListener("mouseout", function(){

message  = "Dodge Challenger mouseout!";

});

this.addRegionEventListener("mousedown", function(){

message  = "Dodge Challenger mousedown!";

});

this.addRegionEventListener("mouseup", function(){

message  = "Dodge Challenger mouseup!";

});

this.closeRegion();

this.beginRegion();

context.drawImage(images.cobraImg,  350,  50,  200,  150);

//为图像绘制矩形区域

context.beginPath();

context.rect(350,  50,  200,  150);

context.closePath();

this.addRegionEventListener("mouseover", function(){

message  = "AC Cobra mouseover!";

});

this.addRegionEventListener("mouseout", function(){

message  = "AC Cobra mouseout!";

});

this.addRegionEventListener("mousedown", function(){

message  = "AC Cobra mousedown!";

});

this.addRegionEventListener("mouseup", function(){

message  = "AC Cobra mouseup!";

});

this.closeRegion();

writeMessage(context, message);

});

}

6. 页面加载完成后，创建一组图像，并把它们作为loadImages()函数的入参：

window.onload  = function(){

var sources  =  {

challengerImg: "challenger.jpg", cobraImg: "cobra.jpg"

};

loadImages(sources, drawImages);

};

7. 在HTML文档的body部分嵌入canvas标签：

工作原理

页面加载完成后，我们可以使用图像加载函数，来加载两幅图像。当两幅图像都加载完成后，调用drawImages()函数，并实例化一个Events对象。在stage()函数中，我们调用beginRegion()函数开始一个新区域，绘制第一幅图像，再绘制一个矩形路径来定义图像路径，使用addRegionEventListener()方法附加事件，然后关闭路径。接下来，重复这个过程，来创建第二幅图像，并附加自己的一组事件监听器。

相关参考

第3章 绘制图像