HTML5 Canvas实战
6 与画布交互:为图形和区域附加事件监听器
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

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

目前为止,我们已经学习了如何在画布中绘制图形、处理图像和视频、创建流体动画。本章重点介绍与画布的交互。到目前为止,我们的所有画布项目都是没有反应,并脱离用户的。虽然HTML5的画布API没有提供为图形和区域附加事件监听器的手段,我们一定能够扩展其API来实现这样的功能。根据HTML5规范,一旦图形绘制完成,我们就无法像访问HTML文档中的DOM元素那样,把它们作为对象进行访问。在HTML5画布规范列入为图形和区域附加事件监听器的方法之前,(希望会有这么一天),我们需要构造我们自己的Events类,来做到这一点。我们的类使我们能够为包含一个或多个图形的区域附加事件监听器,类似于给DOM元素附加事件监听器。

这应该是一个相当厉害的想法,因为它使我们能够在画布上绘制出可以跟用户交互的图形。我们的Events类将支持鼠标事件(mousedown, mouseup, mouseover, mouseout, mousemove)及触摸事件(touchstart, touchend, touchmove)。

虽然本章多数例子都是使用鼠标事件,但是,也可以进行修改,通过把mousedown替换为touchstart,mouseup替换为touchend, mousemove替换为touchmove,它们就能支持支持移动设备上的触摸事件。

本章内容:

  • 创建一个Events类
  • 使用画布鼠标坐标
  • 为区域附加鼠标事件监听器
  • 为移动设备上的区域附加触摸事件监听器
  • 为图像附加事件监听器
  • 拖放图形
  • 拖放图像
  • 创建图像放大器
  • 创建绘图应用程序
← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验