利用canvas实现毛笔字帖（三）

carvenzhang 4月 24, 2016

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

<script src="js/paper.js"></script>
<script src="js/write.js"></script>
<script src="js/controller.js"></script>
<script>
    window.onload = function () {
        var canvas = document.getElementById('canvas');
        paper.init(canvas);
        write.init(canvas);
        controller.init(canvas);
    };
</script>

效果如图：

依赖关系和模块加载优化（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做如下引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>毛笔字</title>
    <meta name="viewport" content="width=device-width;height=device-height;initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="css/write.css" rel="stylesheet" type="text/css">
</head>
<body>
<canvas id="canvas">
    您的浏览器版本不支持canvas，请更新或者下载chrome
</canvas>
<div id="controller">
    <div id="black" class="on"></div>
    <div id="red"></div>
    <div id="green"></div>
    <div id="yellow"></div>
    <div id="purple"></div>
    <div id="orange"></div>
    <div id="blue"></div>
    <div id="indigo"></div>
    <button id="reset">清除</button>
</div>
<script src="js/require.js" data-main="js/index"></script>
</body>
</html>

一句<script src="js/require.js" data-main="js/index"></script>就能搞定，实在太方便啦。

完整代码我就放在我的github项目中，大家可以去下载参考
代码/canvas-demo/write
这里还有在线的效果演示
在线演示

有了这个经验，做一个你画我猜的游戏出来已经不是问题啦。

结尾

canvas的api还在持续更新，会更加强大，大家一起学习