小程序之文字公告水平无缝滚动

小程序，直接没了dom的操做，没想到法子怎么搞。顺路就去搜罗各类实现，但都不尽满意，因此就试着本身去搞个，直接用 canvas 画了。

这是原生版的 canvas 无缝实现：

https://jsfiddle.net/lyplba/6...

不过由于小程序魔改过各类原生API，是贴代码吧：

wx.getSystemInfo({
    success: function (res) {
        let message = '建立 canvas 绘图上下文（指定 canvasId）。在自定义组件下，第二个参数传入组件实例this，以操做组件内 <canvas/> 组件';
        let movement = 0;
        let ctx = wx.createCanvasContext("marqueeCanvas");
        ctx.setFontSize(14); // 要写在外面，否则会致使计算总长度时候采用默认字号
        let messageWidth = ctx.measureText(message).width;
        let tid = setInterval(function () {
            ctx.clearRect(0, 0, res.screenwidth, 32);
            ctx.fillRect(0, 0, res.screenwidth, 32);
            ctx.setFillStyle('#c29a63');
            ctx.fillText(message + message, movement, 21);
            ctx.draw();

            movement -= 1;

            if (Math.abs(movement) === messageWidth) {
                movement = 0;
            }
        }, 1000 / 60);
    }
});

样式：

canvas {
    display: block;
    width: 100%;
    height: 32px;
    font-size: 14px;
    color: #c29a63;
    background-color: #fbf7e9;
}