Как переместить текст внутри холста, как анимированная текстовая строка? - PullRequest
Новая
       0

Как переместить текст внутри холста, как анимированная текстовая строка?

0 голосов
/ 02 февраля 2019

Я рисую холст и добавил несколько форм и текста, и я хочу переместить текст внутри холста, как текстовая строка, анимированная слева направо. Как вы можете видеть, когда я двигаюсь, текст движется некак это должно быть.

Как я могу это исправить? 

<script>
   var pointX, pointY , w , h ;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = window.innerWidth;
         c.height = window.innerHeight;
    ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
    ctx.beginPath();
    var start = 10;
 setInterval(function(){
 
 start += 4;
 ctx.font = "30px Arial";
    ctx.fillStyle = "red";
     ctx.textAlign = "left";
    ctx.fillText("Hello World",start, 560);  
  }, 40);
ctx.closePath();
     pointX = 690;
     pointY = 550;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
 
</script>
<!DOCTYPE html>
        <html>
        <head>
        <script src ="js/jquery-3.3.1.min.js" ></script>
        <link href ="css/bootstrap.min.css" rel="stylesheet">
        <script src ="js/bootstrap.min.js" ></script>
        <meta charset="utf-8">
            <meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/>


        </head>
<body dir="rtl"  id="tbodyid">
      
              <canvas id="myCanvas" width="1050" height="1050"  class="col-12 col-s-12" >
                </canvas>
</body>



</html>

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019 

<canvas id="myCanvas" width="1050" height="1050"  class="col-12 col-s-12" >
                </canvas>
<script>
var pointX, pointY , w , h ;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,70);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='gold';
    ctx.fillRect(10,10,720,50);
    ctx.closePath();
}

function drawShape2(){
     pointX = 690;
     pointY = 30;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
}
    

    var start = 10;
 
function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height)
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
    ctx.fillStyle = "red";
     ctx.textAlign = "left";
    ctx.fillText("Hello World",start, 50); 
    if (start > 576) start = 0;
  drawShape2() 
  }

frame()
</script>
0 голосов
/ 02 февраля 2019

Как я уже говорил, внутри вашей функции setInterval вы должны добавить ctx.clearRect(0,0,c.width,c.height).Также вы должны перерисовать все остальное.Итак, я поместил ваши фигуры в функции, и я тоже вызываю эти функции внутри setInterval. 

var pointX, pointY , w , h ;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
     pointX = 690;
     pointY = 550;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
}
    

    var start = 10;
 
setInterval(function(){
 ctx.clearRect(0,0,c.width,c.height)
 drawShape1() 
 start += 4;
 ctx.font = "30px Arial";
    ctx.fillStyle = "red";
     ctx.textAlign = "left";
    ctx.fillText("Hello World",start, 560); 
  drawShape2() 
  }, 40);
<canvas id="myCanvas" width="1000" height="650"  class="col-12 col-s-12" ></canvas>

Однако, если вы хотите попробовать использовать requestAnimationFrame вместо setInterval, вот как это сделать: поскольку requestAnimationFrame работает со скоростью 60 кадров в секундуЯ изменил start += 4; на start += 2;

var pointX, pointY , w , h ;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
     pointX = 690;
     pointY = 550;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
}
    

    var start = 10;
 
function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height)
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
    ctx.fillStyle = "red";
     ctx.textAlign = "left";
    ctx.fillText("Hello World",start, 560); 
  drawShape2() 
  }

frame()
<canvas id="myCanvas" width="1050" height="1050"  class="col-12 col-s-12" >
                </canvas>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...