首页 文章

询问canvas函数中的问题

提问于
浏览 次
-1

为什么它不能正常运作？单击按钮时，块根本不移动 . 本来，网站可以正常运行，但是在改变了几次块的大小后，网站突然无法正常运行 . 有人会帮我解决问题吗？非常感谢！

<!DOCTYPE html>
<html>
<head> 
<style>
canvas{border:1px solid black;)
</style>
<script>
var canvas;
var ctx;
var rect_x=0;
var rect_y=0;
function animate()
{
  ctx.clearRect(0,0,canvas.width,canvas.height);
  rect_y+=5;
  canvas = document.getElementById("Mycanvas");
  ctx = canvas.getContext("2d");
  ctx.fillStyle="red";
  ctx.fillRect(rect_x,rect_y,50,50); 
  if (rect_y>=canvas.height-50);
  {clearInterval(timer);}
}
function draw()
{
  rect_x = 0;
  rect_y = 0;
  canvas = document.getElementById("Mycanvas");
  ctx = canvas.getContext("2d");

  timer = setInterval("animate()",50);
}
</script>
</head>
<body>
<canvas id="Mycanvas" width="200" height="300"></canvas>


<button onclick="draw()"> Draw</button>
</body>
</html>
javascript canvas html5-canvas

2 回答

  • 1

    您应该始终努力使代码具有可伸缩性和可重用性，同时尽可能保持清晰和简单 . 像下面这样的事情会处理错误 .

    <!DOCTYPE html>
<head></head>
<body>
<canvas id="Mycanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas> 
<script>
var c=document.getElementById("Mycanvas");
var ctx=c.getContext("2d");
var rect_x=0;
var rect_y=0;
var rectHeight = c.height/10;
var rectWidth = c.width/10;

function animate(){
ctx.clearRect(0,0,c.width,c.height);
drawNew();
if (rect_y+5<=c.height-rectHeight){
rect_y+=5;}
}

function drawNew(){
ctx.beginPath();
ctx.rect(rect_x, rect_y, rectWidth, rectHeight);
ctx.fillStyle = "red";
ctx.fill();
}

setInterval(animate,50); 

</script>
</body></html>
    回复于
  • 0

    Typo 你的 if() 条件后你有一个分号

    if (rect_y>=canvas.height-50);

    这等于“如果 rect_y >= canvas.height - 50 什么都不做”

    if (rect_y >= canvas.height - 50)
    ;

    并且意味着您的下一个块 {clearInterval(timer);} 将始终被调用 .

    <!DOCTYPE html>
<html>
<head> 
<style>
canvas{border:1px solid black;)
</style>
<script>
var canvas;
var ctx;
var rect_x=0;
var rect_y=0;
function animate()
{
  ctx.clearRect(0,0,canvas.width,canvas.height);
  rect_y += 5;
  canvas = document.getElementById("Mycanvas");
  ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(rect_x,rect_y,50,50); 
  if (rect_y>=canvas.height-50) {
    clearInterval(timer);
  }
}
function draw()
{
  rect_x = 0;
  rect_y = 0;
  canvas = document.getElementById("Mycanvas");
  ctx = canvas.getContext("2d");

  timer = setInterval("animate()",50);
}
</script>
</head>
<body>
<canvas id="Mycanvas" width="200" height="300"></canvas>

    
<button onclick="draw()"> Draw</button>
</body>
</html>

    但请注意，从您的代码开始，会有很多关于代码的说法

    • 不使用setInterval作为可视动画，总是更喜欢requestAnimationFrame .

    • 此外，永远不要像_53951中那样隐含地使用邪恶的eval，而是直接传递对回调的引用，如 setInterval(someFunc, t) .

    • 在清除之前永远不会覆盖setInterval超时 . 使用当前代码，如果在满足条件之前多次单击，则会有几个setIntervals在页面消失之前运行 .

    回复于

相关问题