1

我在这里找到了这段代码： https ://github.com/shinstudio/html5_myown_party/blob/master/news_ticker/index.html

我需要从右到左更改股票滚动。

画布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');
4

4 回答 4

1

您需要将 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;
        }

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

于 2013-11-12T06:44:54.823 回答
1

http://jsfiddle.net/t74ww/1/

var globalx = 500;
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 < 0 - ctx.measureText(label).width) {
        globalx = canvasWidth;
    }  
    ctx.fillText(label, globalx, (canvasHeight-fontsize)/2);

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

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

干杯

于 2013-11-12T06:47:01.537 回答
0

globalx 是 vraibale，它正在增加并将其从 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 上做相反的事情应该为你解决问题。

于 2013-11-12T06:42:25.877 回答
0 
                        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');

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

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

改变这个来改变间隔，除了所有工作都很好我认为这会帮助你考虑...... :)

[更新]

globax=interval 改变这个间隔

于 2013-11-12T06:49:44.603 回答