众所周知canvas是位图，在位图里我们可以在里面画各种东西，可以是图片，可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。
我先来讲下实现原理：其实就是canvas绑定相关事件，在通过记录图片所在canvas的坐标，判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。不过实现起来还是有稍许复杂的。
ps：下面的代码我是用ts写的，大家当es6看就好了，稍有不同的可以查看
typescript的文档 (typescript真的很好用，建议大家多多了解)。
1、建立图片和canvas之间的联系（这里我用色块来代替图片）
这里要色块和canvas建立一定的联系，而不是单纯的渲染。还要记录色块所在坐标、宽高。我们先一步一步来实现
首先写基本的html页面创建一个canvas：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas事件</title>
<style>
html, body {
height: 100%;
background: #eee;
}
canvas {
background: #fff;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas width="500" height="500" id="canvas"></canvas>
</body>下一步，我们要定一个Canvas的类，这个类应该要有些什么功能呢？
要有对应的canvas。
装色块数据的容器。
有添加色块的方法。
渲染色块的方法。
渲染所有色块的方法。
因为色块也有自己的一些参数，为了方便拓展，我们也为色块定一个类，这类需要的功能有：
宽、高、颜色、坐标（x,y），还有Canvas实例;初步就定这几个吧
ok开始写
// Canvas类
class Canvas {
blockList: Block[]ctx: any
canvas: any
createBlock (option) {
option.Canvas = this
this.blockList.push(new Block(option))
this.painting()
}
rendering (block) { // 渲染色块函数
this.ctx.fillStyle = block.color
this.ctx.fillRect(block.x, block.y, block.w, block.h)
}
painting () { // 将容器里的色块全部渲染到canvas
// 清空画布（渲染之前应该将老的清空）
this.ctx.fillStyle = '#fff'
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
this.blockList.forEach(ele => {
