横向滚动文字php代码,小程序之文字公告水平无缝滚动

小程序，直接没了dom的操作，没想到法子怎么搞。顺路就去搜罗各种实现，但都不尽满意，所以就试着自己去搞个，直接用 canvas 画了。

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

不过因为小程序魔改过各种原生API，是贴代码吧：

wx.getSystemInfo({

success: function (res) {

let message = '创建 canvas 绘图上下文(指定 canvasId)。在自定义组件下，第二个参数传入组件实例this，以操作组件内 组件';

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;

}