html 毛笔书写效果,利用canvas实现毛笔字帖（三）

上接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.toLowerCas