开发Canvas 绘画应用（一）：搭好框架

毕业汪今年要毕业啦，毕设做的是三维模型草图检索，年前将算法移植到移动端做了一个小应用（利用nodejs搭的服务），正好也趁此机会可以将前端的 Canvas 好好学一下~~毕设差不多做完了，现将思路和代码进行回顾整理，希望以最简单的方式将核心前端部分总结并呈现。

Canvas 绘画应用

采用 webpack、ES6、HTML5、jQuery 构建，利用了移动端的触摸和手势事件，结合 Canvas，实现在移动端的绘画功能。

先从简单的小绘图功能开始实现，后面有新的功能进行迭代实现。

采取的CSS规范

规范参考
OOCSS：结构（structure）与表现（skin）分离，容器（container）与内容（content）分离
BEM：类似于组件化的概念，独立的元素搭积木拼接

基础目录结构

paintApp/
- asset/
  - css/
  - img/
- src/
  - common/
  - component/
  - app.js
- index.html
- package.json
- webpack.config.js

基础功能实现

☞ index.html

<canvas class="painter" id="js-cva">A drawing of something</canvas>

☞ painter.js

① 获取canvas及上下文

// 初始化选择器

initSelectors() {

    this.cva = document.getElementById('js-cva');

    this.ctx = this.cva.getContext('2d');

    return this;

}

② 设置绘图板

// 属性设置

setConfig() {

    this.config = {

        cvaW: 800,

        cvaH: 600,

        cvaBg: '#fff',

        lineWidth: 2,

        lineJoin: 'round',

        strokeStyle: 'red'

    };

    return this;

}

// 画板宽高设置

// 注意此处不能在 css 中设置，像素会失真，会导致不能获取正确的坐标

setCvaWH() {

    this.cva.setAttribute('width', this.config.cvaW);

    this.cva.setAttribute('height', this.config.cvaH);

    return this;

}

// 画板背景设置

setCvaBg() {

    this.ctx.fillStyle = this.config.cvaBg;

    this.ctx.fillRect(0, 0, this.config.cvaW, this.config.cvaH);

    return this;

}

// 画笔设置

setPen() {

    this.ctx.lineWidth = this.config.lineWidth;

    this.ctx.lineJoin = this.config.lineJoin;

    this.ctx.strokeStyle = this.config.strokeStyle;

    return this;

}

设置样式均在 this.ctx 上下文中设置，如 fillStyle、fillRect、lineWidth、lineJoin、strokeStyle 等。

③ 监听触摸事件

initEvents() {

    this._touchListen('touchstart');

    this._touchListen('touchmove');

    this._touchListen('touchend');

}

_touchListen(event) {

    this.cva.addEventListener(event, $.proxy(this.touchF, this), false);

}

移动端的触摸事件如下（摘自《JavaScript 高级程序设计》）：

touchstart：当手指触摸屏幕时触发；即使有一个手指放在了屏幕上也触发。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用 preventDefault() 可以阻止滚动
touchend：当手指东屏幕上移开时触发。
toucncancle：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

④ 事件处理函数（★重点）

touchF(e) {

    e.preventDefault();	// 阻止浏览器默认行为

    switch (e.type) {

        case 'touchstart':

            break;

        case 'touchmove':

            break;

        case 'touchend':

            break;

    }

}

基础框架有了，事件监听也实现了，接下来就是获取触摸点的坐标，实现绘画功能了，请继续阅读开发Canvas绘画应用（二）：实现绘画

✈ Github：paintApp

✎ 参考：

HTML5实例教程——创意画板

使用html5 canvas制作涂鸦画板

JS | 移动端“刮刮卡式”蒙层画板 Canvas

巴特西