Javascript html5画布文本动画新闻报价器

我在这里找到了这段代码：

我需要把股票从右向左滚动

画布js代码：

<div id="border">
   <canvas id="bannershow" width="500" height="150" />
</div>

var globalx = 0;
var vector = 1;
var interval = 120;
var canvas = document.getElementById('bannershow');
var ctx = canvas.getContext('2d');
var fontsize = 80;
var canvasHeight = 150;
var canvasWidth = 500;

function banner(label) {

    ctx.clearRect(0, 0, canvasWidth, canvasHeight);    
    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect (0, 0, canvasWidth, canvasHeight);

    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
    ctx.font = fontsize + 'px Helvetica';
    ctx.textBaseline = 'top';

    if (globalx > canvasWidth) {
        globalx = ctx.measureText(label).width * -1;
    }
    ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);

    globalx += vector;
}
setInterval(banner, 1000/interval, 'Helvetica is the new font');

var globalx=0；
var向量=1；
var区间=120；
var canvas=document.getElementById（'bannershow'）；
var ctx=canvas.getContext（'2d'）；
var-fontsize=80；
var canvasHeight=150；
var canvasWidth=500；
功能横幅（标签）{
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.fillStyle='rgb（0,0,0）'；
ctx.fillRect（0，0，画布宽度，画布高度）；
ctx.fillStyle='rgba（255，255，255，0.4）'
ctx.font=fontsize+‘px Helvetica’；
ctx.textb基线='top'；
if（globalx>画布宽度）{
globalx=ctx.measureText（标签）.width*-1；
}
ctx.fillText（标签，globalx，（画布高度/字体大小）/2）；
globalx+=向量；
}
setInterval（横幅，1000/interval，“Helvetica是新字体”）；

globalx是一个Vraible，它从0增加到画布的宽度，只需做相反的操作，很可能对您有用

                    function banner(label) {
                    ctx.clearRect(0, 0, canvasWidth, canvasHeight);    
                    ctx.fillStyle = 'rgb(0, 0, 0)';
                    ctx.fillRect (0, 0, canvasWidth, canvasHeight);

                    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
                    ctx.font = fontsize + 'px Helvetica';
                    ctx.textBaseline = 'top';
                    globalx = canvaswidth;
                    if (globalx > 0 ) {
                         globalx = ctx.measureText(label).width * 1;
                    }
                    ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);

                    globalx -= vector;
                }

PS-我还没有测试过它，但似乎从画布的宽度开始，在globalx上做相反的操作，应该可以满足您的需要。

您需要将banner（）函数更改为：

       function banner(label) {
            ctx.clearRect(0, 0, canvasWidth, canvasHeight);    
            ctx.fillStyle = 'rgb(0, 0, 0)';
            ctx.fillRect (0, 0, canvasWidth, canvasHeight);

            ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
            ctx.font = fontsize + 'px Helvetica';
            ctx.textBaseline = 'top';
            if (globalx < ctx.measureText(label).width * -1) {
                 globalx =  canvasWidth;
            }
            ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);

            globalx -= vector;
        }

功能横幅（标签）{
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.fillStyle='rgb（0,0,0）'；
ctx.fillRect（0，0，画布宽度，画布高度）；
ctx.fillStyle='rgba（255，255，255，0.4）'
ctx.font=fontsize+‘px Helvetica’；
ctx.textb基线='top'；
if（globalx

负向量将反转移动，修改后的globalx条件将保持连续循环

var globalx=500；
向量var=-1；
var区间=120；
var canvas=document.getElementById（'bannershow'）；
var ctx=canvas.getContext（'2d'）；
var-fontsize=80；
var canvasHeight=150；
var canvasWidth=500；
功能横幅（标签）{
ctx.clearRect（0，0，画布宽度，画布高度）；
ctx.fillStyle='rgb（0,0,0）'；
ctx.fillRect（0，0，画布宽度，画布高度）；
ctx.fillStyle='rgba（255，255，255，0.4）'
ctx.font=fontsize+‘px Helvetica’；
ctx.textb基线='top'；
if（globalx<0-ctx.measureText（标签）.width）{
globalx=画布宽度；
}  
ctx.fillText（标签，globalx，（画布高度/字体大小）/2）；
globalx+=向量；
}
setInterval（横幅，1000/interval，“Helvetica是新字体”）；

只需改变vector=-1和globalx=500。vector负责水平滚动的方向，globalx是文本渲染的起始点（在x轴上）。 更改这些变量比更改函数更好。实际上，动画由该设置/变量控制

干杯

在检查了一点后，我发现这是一个循环和工作，如果您想更改该循环的间隔，您可以更改globalx值

if(globalx==-500)
{
  globalx=50;
}

将此更改为更改间隔，除了所有工作正常之外，我认为这将有助于您考虑……：）

[更新]

globax=间隔更改此间隔

---

这一个有效…但它在循环上打嗝…我怎样才能使它在循环结束时不失真？我描述你必须改变间隔globax=间隔，这样你就可以在我的回答中做一个chge更新。我的解决方案如下-它循环我稍微改变了我的解决方案。现在它循环。

                        var globalx = 0;
                        var vector = 2;
                        var interval = 120;
                        var canvas = document.getElementById('bannershow');
                        var ctx = canvas.getContext('2d');
                        var fontsize = 120;
                        var canvasHeight = 150;
                        var canvasWidth = 500;

                        function banner(label) {

                            ctx.clearRect(0, 0, canvasWidth, canvasHeight);    
                            ctx.fillStyle = 'rgb(0, 0, 0)';
                            ctx.fillRect (0, 0, canvasWidth, canvasHeight);

                            ctx.fillStyle = 'rgba(255, 255, 255, 0.4)'
                            ctx.font = fontsize + 'px Helvetica';
                            ctx.textBaseline = 'top';
                            if (globalx > canvasWidth) {
                                 globalx = ctx.measureText(label).width * -1;
                            }
                            ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);
                            if(globalx==-500)
                            {
                                globalx=50;
                            }
                            globalx -= vector;
                        }
                        setInterval(banner, 1000/interval, 'Helvetica');

if(globalx==-500)
{
  globalx=50;
}