HTML5 Canvas实战
6.5 为图像附加事件监听器
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

创建一个Events类

使用画布鼠标坐标

为区域附加鼠标事件监听器

为移动设备上的区域附加触摸事件监听器

为图像附加事件监听器

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

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

操作步骤

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

1. 链接到Events类:

<script src="events.js">
</script>

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

<script>
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);
};
</script>

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

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

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

相关参考

  • 第3章 绘制图像

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验