上接javascript上接 利用canvas实现毛笔字帖(一)
二、 根据功能需要完善代码2. 第2部分write.js第二部分决定先介绍write部分,因为controller部分必须要结合write部分才能看到效果。针对write.js部分,前面有介绍,是用来实现通过鼠标(手指)写字的核心部分。分析一下要做的事情。
当鼠标按下(mousedown)时,我们认为是毛笔落在纸上了。
当鼠标移动(mousemove)时,我们认为是毛笔在移动。
当鼠标放开(mouseup)时,我们认为是毛笔收起了。
当鼠标移出canvas范围时,我们认为毛笔移出字帖的范围了,也认为是收笔了。
阅读全文
最近在慕课网上找到了很好的canvas教程,来自 @liuyubobobo 的 学写一个字 canvas绘图教程在 @liuyubobobo 老师的系列canvas教程中,我学到不少知识。今天,运用在视频中的所学,结合自己的代码风格,我自己尝试也写一个字帖出来,在这里分享一下思路和过程具体代码其实已经push在github上,感兴趣的可以clone下来参考一下。代码/canvas-demo/write这里还有在线的效果演示在线演示
想法如图:在canvas在实现这样一个效果,有一个米字格,可以用鼠标(pc)甚至手指(手机)在上面写字,字要有点像毛笔字。下面有控制部件,可以控制笔的颜色,还是可以清空米字格的墨迹。
下面就开始着手去写了。
阅读全文
遇见问题最近的时间都在开发社团内部的应用–隧道口,虽然只有简单的几个页面,但是依然是遇到了不少坑。其中 date 的时间处理就是一个。
简单说一下需求。。现在在做一个活动列表,后台传一个json,里面包含活动的列表数组。我遍历数组并创建对应的视图显示,并且以月份作为分类标准。展示一下后台拿来的数据
阅读全文