小程序之文字公告水平無縫滾動

小程序，直接沒了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;
}