How to move the text inside the canvas like the text bar animated?
Question
I'm drawing canvas and have put in some shapes and text and I want to move the text inside the canvas like the text bar animated from left to right As you can see, when I'm moving the text is moving not like it supposed to be.
How can I fix it?
<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 answers
solution1
0 ACCPTED 2019-02-02 18:28:16
As I've commented, inside your setInterval function you should add ctx.clearRect(0,0,c.width,c.height) . Also you have to redraw everything else. So I've putted your shapes inside functions, and I'm calling those functions inside setInterval too.
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>
However if you want to try using requestAnimationFrame instead of setInterval this is how to do it: Since requestAnimationFrame runs at 60 frames per sec I've changed start += 4; to 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>
solution2
0 2019-02-03 19:48:09
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to resize canvas with Animated Text on it?
How to move text with the wheel in the canvas
animated text with in a scroll bar
move text inside canvas element and make it centered
Animated progress bar text display
How to make animated bar graph with canvas?
cannot move text in webpage after it is animated
Move text while one word is being animated
HTML text inside Canvas
jQuery animate to move text on a canvas
Related Tags