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

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

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

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

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

— 02.02.2019 18:46

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

— 02.02.2019 19:02

javascript html css html5-canvas

02.02.2019 18:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Как я уже говорил, внутри вашей функции 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>

Я задал вопрос здесь stackoverflow.com/questions/54496715/…

— 02.02.2019 20:43

02.02.2019 19:28

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

03.02.2019 20:48

Другие вопросы по теме

Как отфильтровать константу javascript, отображаемую в виде таблицы?

Проблема AJAX с получением данных из PHP

Есть ли способ переместить пользовательскую полосу прокрутки HTML за div

Почему я не могу центрировать эту форму?

Как периодически обновлять заголовок веб-сайта, когда он находится на другой вкладке?

Как отобразить перевод текста в новом элементе

Как исправить мою базу данных MySQLi при вставке строк в таблицу из php

Джанго, тег, href. Как перейти на верхний уровень?

Использование ISSET() и значение никогда не бывает False с кодом опции выбора Html

Проблема добавления кнопок и ссылок в плейсхолдер

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

Ответы 2

Другие вопросы по теме

Похожие вопросы