如何在畫布內像移動文本欄一樣移動文本？
[英]How to move the text inside the canvas like the text bar animated?
問題描述
我正在繪制畫布，並放置了一些形狀和文本，我想在畫布內移動文本，就像從左到右動畫的文本欄一樣，正如您所看到的，當我移動文本時，文本的移動不像預期的那樣成為。
我該如何解決？
<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
正如我已經評論過的那樣，您應該在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 += 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>
解決方案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>
如何調整帶有動畫文本的 canvas 的大小？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.