作者：心叶
时间：2018-11-07 11:13
温馨提示：clay.js已经停止维护，项目迁移到 https://github.com/yelloxing/...
喜欢本项目的可以在github上给给star。
在我们使用canvas2D绘图的时候（在我看来，换一个角度，WebGL也适用于这里），总是苦于没有SVG的灵活性，特别是对图片中一个特定图标绑定事件（看看上边的GIF，鼠标悬浮在特定区域显示提示信息）。
除此之外，绘图的时候，我们也无法像之前的HTML那样，重绘部分图案，只有全部擦除了重新绘制，这是一件让人沮丧的事实。
幸运的是，clay提供了类似photoshop的图层功能，而针对图片中一个特定区域绑定事件，抽象了一个区域对象的概念。你可以 点击这里 查看上图实际运行效果或源码，对比下面的说明。
图层管理者
之前使用canvas2D绘图的时候，我们总是习惯性的这样获取这只神奇的画笔：
var pencil=document.getElementsByTagName('canvas')[0].getContext('2d');通过这只画笔我们就可以直接调用各种canvas2D提供的接口绘制图形了，这的确很炫酷。而为了更方便绘图，clay在此基础上抽象了一个图层管理者，我们不直接使用canvas提供的画笔绘图，而是使用图层管理者提供的画笔，就像下面这样：
// 创建图层管理者
var layerManger = $$('#canvas').layer();
// 获取不同图层的画笔
// 分别用于绘制背景、数据图形和悬浮提示的图层上的画笔
var bg_pencil = layerManger.painter('bg'),
arc_pencil = layerManger.painter('arc'),
prompt_pencil = layerManger.painter('prompt');我们获取了bg_pencil、arc_pencil和prompt_pencil这三只画笔，当你使用他们绘图时，和之前获取的画笔pencil没有任何区别。唯一的区别是，他们会分别绘制在各自图层上，而不是直接绘制在canvas2D画布上。
这样的好处是，其中一只画笔绘制的图形修改，别的画笔绘制的图形不需要重新绘制，不过，你不应该滥用，如果你绘制的图形一成不变，我们鼓励你使用下面的方法获取画笔：
var pencil=$$('#canvas').painter();这是clay提供的获取canvas2D画笔的方法，和我们最初绘图习惯获取的画笔没有任何区别。
需要特别注意，使用图层管理者获取的画笔绘制的图形在对应图层上，如果想同步到页面上的canvas画布上，需要调用这个方法：
layerManger.update();关于图层管理者更具体的API就查看接口API部分，下面将说明的区域管理者也是一样。
区域管理者
// 创建区域管理者
var regionManger = $$('#canvas').region();使用区域管理者的第一步是创建一个区域管理者，创建结束后，我们就可以在绘图过程中使用了。比如现在想把一个新绘制的图形记录为一个区域，使用类似下面的代码：
regionManger.drawer(id, function (pencil) {
//你需要用pencil这只画笔绘制需要管理的新区域
});pencil这只画笔和普通画笔使用起来一样，只不过你不可以改变fillStyle的值，也不需要在绘图结束的时候调用fill()方法。上面中的id是用来唯一标识这个区域的，同一个id绘制的区域会认为是对之前区域的扩建，如果二个不同id绘制的区域有重叠，后绘制的会覆盖之前绘制的区域。
通过区域管理者把需要的区域都通过drawer方法记录起来以后，你可以在需要的时候调用下面的方法获取当前鼠标所在区域：
var id=regionManger.getRegion(event);其中id就是当前鼠标所在区域的唯一标识。
比如你点击了图形，通过这个标识id，你就知道点击的是哪个区域，从而触发对应事件。