制作一个简易画板

如图所示，我利用微信开发者工具做了一个简单的画板。

1.png

该画板实现了基本的功能有：画线，橡皮擦，文本输入，油漆桶，清除，保存作品。H5方法用到的较多，微信给的API其实用到的比较少。另外还用到了# mustache语法，这个语法是我在写程序中才学到的一个方法。

接下来我阐述一下我遇到的问题：

一、是在鼠标点击canvas时Input框来辅助完成文本输入的方法。

在html里，canvas标签嵌套一个input标签（type="text"），input框的display的值为'{{display}}'，注：这里用到了# mustache语法。首先需要在

Page{data:"display":"none"}，

开始设置display为none值是为了触摸后使文本框显示，这样还可以直接在css样式中修改{{display}}的值。

接下来在canvas的touch..上绑定一个事件，当你使用文本功能时，触摸屏幕会触发该绑定事件的函数执行，在这个函数体中修改display的值，格式如下：this.setData({ "display":"block" })。这样原本隐藏的input框就可以显示了。

二、画线问题

在画线时，我们需要借助一个变量去记录上一个触摸点的位置，姑且称为oldPoint。该点存储在data里。每次画线时先判断oldPoint是否为空，如果为空，就把第一个触摸点记录；如果不为空，就先moveTo(oldPoint)，之后lineTo(oldPoint)，连好后再更新oldPoint。注意，ctx.draw()这个方法的默认参数是false，如果不写true，每次都会重画，无法保存之前画过的内容。

三、其他小问题
在变颜色的时候，我没有注意setFillColor和setStrokeColor的区别..我以为都是变色的，后来发现一个是变填充颜色的，一个是变线条颜色的。

有问题评论区留言，博主会耐心回复的~