Question

我尝试使用html canvas制作程序。我不知道我做错了什么，但我的代码不起作用。我的程序应该如下工作：程序将绘制一个正方形。接下来，它将更改用于创建方块的变量的值。我放了一个setInterval来多次运行我的函数。是的，我知道没有clearRect。但是，广场应该增长。它实际上是如何工作的如下：它绘制一个红色方块，没有其他任何事情发生。请帮助我，并提供纯javascript / html的解决方案。谢谢。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <canvas id="canvas" width="300px" height="300px" style="border:1px solid #000"></canvas>
<script>
var x = 75;
var y = 75;
var w = 150;
var h = 150;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var dx = -1
var dy = -1
var dw = 2
var dh = 2
var col = "#f00"

function size(v,min,max,d) {
  if (v > max || v < min) {
    d = -d;
  }
  v += d;
}

function draw() {
  ctx.fillStyle = col;
  ctx.fillRect(x,y,w,h);
  size(x,0,150,dx);
  size(y,0,150,dy);
  size(w,0,300,dw);
  size(h,0,300,dh);
}

setInterval(draw,25)
</script>

Answer 1

问题是函数参数是按值传递的，而不是参考。 n函数获取数字参数的本地副本。您需要从函数返回一个值并将其分配给调用范围中的变量。

另一个问题是您想要在一个函数中更改size()和d。这需要全局变量（坏主意），返回某种数据结构，或将逻辑分解为多个函数。这是一条路：

HTML画布不像我希望的那样工作

1 个答案: