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

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

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h0hbc21aiib

猜你喜欢

转载自www.cnblogs.com/homehtml/p/12714761.html