前言：小程序发布以来一直就很火，最近得空学习了一下。反正前端来什么都的学一下，新东西来的又快！扯远了~，为了验证一下学习成果，就做了一个练手的小程序项目。忘了为什么要做一个灯牌的原因，就当是上帝交给我的任务吧！
嘿嘿嘿！略略略~
简单说一下小程序：
-wxml文件，就当他是HTML
-wxss文件，就当她是CSS
-wxs 文件，你看这个文件，它又……不要唱了。他是小程序的脚本语言，可以看做小程序的JS.
先放一张效果图
- 先写页面，看一下wxml语法，和写HTML差不多，写过vue的人更清楚了，样式也和css一样。
- 画板用的就是画布
canvas。属性控制面板的动画，直接调用小程序的API接口Animation,使用起来也很简单，参考官方文档即可。 - 该项目的核心点就是画布
canvas的动画处理了
//注：ctx = wx.createCanvasContext('mainCanvas')
ctx.font = fontSize + "px Georgia";
ctx.fillStyle = gradient;
ctx.textBaseline = "middle";
ctx.fillText(textVal, axisX, -dwidth / 2);
一目了然，如何在画布上写字,并且可以设置字体、颜色、大写、位置。对，我给位置画了重点，文字的动画都要靠它了。
文字的彩色，就是创建一个线性的渐变颜色，API接口createLinearGradient，贴出对应代码：
let gradient = ctx.createLinearGradient(0, 0, fontw * density, 0);
gradient.addColorStop(0, colors[0] || '#ffffff')
for (let i = 0; i < colors.length; i++) {
gradient.addColorStop((i + 1) / colors.length, colors[i])
}
接下来就到了坑点了：
- 小程序不能横屏，这就比较坑啊。怎么办，我只能：
ctx.rotate(90 * Math.PI / 180)
旋转90度，这时候要注意了，画布的文字的坐标就要以下图为标准了：
所以要使文字达到滚屏效果，正确的的方式是改变X的坐标，贴出对应代码：
if (fontw > dheight) {
if (axisX <= -fontw) {
axisX = dheight
}
axisX -= this.data.config.moveSpeed
} else {
axisX = (dheight - fontw) / 2
}
-
还有一个坑就是，小程序不支持
requestAnimationFrame也没有找到对应的画布动画API，只能写好几个setTimeout和setInterval，这个东西用多了总归不好，但是目前只能这样。 -
小程序居然没有调色板，这个也是没办法，我只能写一个颜色数组了，写了一些主流颜色。
是的，这些颜色块其实是checkbox伪装的，这样就可以颜色多选了。 -
最后一个坑就是我的代码有点乱，借口是：工作还是挺忙的996呢！部门就我一个顶梁柱开发。（哎呀！顶梁柱歪了）
第一次写小程序，总想丰富点什么，就想着往上面加东西，加了一个倒计时、在线时钟。又把分享按钮，客服功能都加了上去，小程序都有完整的API。既然我加了分享，你们就多分享分享，把我的小程序用蹦。
贴上github代码地址：https://github.com/treadmoon/xkxd：