如何在画布内像移动文本栏一样移动文本？
[英]How to move the text inside the canvas like the text bar animated?
问题描述
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 个解决方案
解决方案1
0 已采纳 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) . 正如我已经评论过的那样，您应该在setInterval函数内部添加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. 因此，我已将形状放置在函数中，并且也在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>
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; 但是，如果您想尝试使用requestAnimationFrame而不是setInterval ，请执行以下操作：由于requestAnimationFrame以每秒60帧的速度运行，因此我将start += 4;更改start += 4; to start += 2; 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>
解决方案2
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.