上接javascript
二、 根据功能需要完善代码
3. 第3部分controller.js
这一部分的功能就是要修改毛笔的颜色，还有清空画布。
功能简单，我们一起向下讲。
一开始依然是init
controller.js
var controller = {
canvas: null,//html中的canvas对象，主要标签
context: null, //canvas对象获取的context，用于绘图
init: function (canvas) {
this.canvas = canvas;//接收外界canvas，赋值给自己的属性``canvas``，在下面的其他方法中需要用到
this.context = canvas.getContext('2d');//通过canvas获取context，赋值给自己的属性``context``，在下面的其他方法中需要用到
//事件监听
this.bindEvent();
},
bindEvent: function () {
var self = this;
//事件委托监听
document.getElementById('controller').addEventListener('click', function (event) {
var target = event.target;
if(target.nodeName.toLowerCase() == 'div'){//颜色控制按钮
self.setColor(target);
}
else if(target.id == 'reset'){//画布清除按钮
self.clear();
}
});
},
setColor: function (target) {
//设置笔画颜色
},
clear: function () {
//清除画布
}
};
上面的代码很简单，就是监听不同的行为，执行不同的方法。当按了颜色控制的div时，执行setColor()方法；
当按了清除画布的button时，执行clear()方法。
监听搞定之后呢，我们来具体完善要执行的方法
setColor: function (target) {
//移除其他标签的class
document.querySelector('.on').className = '';
//设置画笔颜色为被点击的元素的id(id名称本来就是对应的颜色的名称)
this.context.strokeStyle = target.id;
//设置被点击的标签的class为on
target.className += ' on';
},
clear: function () {
//清除画布，画布会一片空白
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
//重新绘制出米字格背景
paper.drawPaper();
}
这样，我们完成了controller部分的编写
在html中调用controller
window.onload = function () {
var canvas = document.getElementById('canvas');
paper.init(canvas);
write.init(canvas);
controller.init(canvas);
};
效果如图：
依赖关系和模块加载优化(require.js)
其实完成上面的代码之后呢，整个系统的功能已经完成了，下面要做的只是一些使用方式的优化，我们用require.js来修改一下我们的代码。
首先第一点，html里面要引用带的html太多，不便管理；
其次，代码木块见有依赖关系，比如controller就以来paper，js模块间的加载顺序就要特别注意。
而用require.js就不必可以在意这些事情。
改写模块
下面改造一下之前写的模块。
paper.js
define(function () {
var paper = {/*...*/};
return paper;
});
write.js
define(function () {
var write = {/*...*/};
return write;
});
controller.js
define(['paper'], function (paper) {
var controller = {/*...*/};
return controller;
});
如下，已经将模块改成适用require.js的形式了。
编写require入口文件
index.js
require(['paper','controller','write'], function (paper, controller, write) {
//初始化获取canvas和context
var canvas = document.getElementById('canvas');
paper.init(canvas);
controller.init(canvas);
write.init(canvas);
});
在 html 中调用 require.js
首先，我们在网上下载一个 require.js，放在项目的js目录中。
然后，在html做如下引用。
毛笔字
您的浏览器版本不支持canvas，请更新或者下载chrome
清除
一句就能搞定，实在太方便啦。
完整代码我就放在我的github项目中，大家可以去下载参考
代码/canvas-demo/write
这里还有在线的效果演示
在线演示
有了这个经验，做一个你画我猜的游戏出来已经不是问题啦。
结尾
canvas的api还在持续更新，会更加强大，大家一起学习
如果觉得《html 毛笔书写效果 利用canvas实现毛笔字帖（三）》对你有帮助，请点赞、收藏，并留下你的观点哦！
