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