html5 холст текст анимация новостная лента

Question

У меня есть этот кусок кода FoundIt здесь: https://github.com/shinstudio/html5_myown_party/blob/master/news_ticker/index.html

Мне нужно изменить тикер прокрутки справа налево.

холста код расслоение плотной:

<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'); 

Answer 1

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, начиная с ширины вашего холста, должен сделать трюк для вас.

Answer 2

Вы должны изменить функцию баннера() для:

 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 будет сохранять непрерывное зацикливание.

Answer 3

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'); 

Просто изменить вектор = -1 и GlobalX = 500. вектор несет ответственность за направление горизонтальной прокрутки и GlobalX является начальной точкой (на оси х), где визуализируются текст. Лучше изменить эти переменные, чем изменить функцию. Фактически анимация управляется этими настройками/переменными.

Приветствия

Answer 4

     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; 
} 

измените это, чтобы изменить интервал, за исключением того, что все работает хорошо, я думаю, это поможет вам ... :)

[обновление]

Глобакс = интервал изменения этого интервал