Question

所以我正在开展一个小项目，每秒都会在HTML画布上绘制一个新的圆圈。我遇到的问题是，每当我再次调用run函数时，我都不认为它正在清除屏幕：

var canvas = document.getElementById("evolutionCanvas");
var randAge = Math.floor((Math.random() * 35) + 1);
var i = new Organism();
var radius = 75;

function change()
{
   document.getElementById("test").innerHTML = "this was pressed";
}

function Organism(env, age, food, preds)
{
    this.environment = env;
    this.age = age;
    this.food = food;
    this.preds = preds;
    this.detSurvivability = function(food, preds, age, env)
    {
        var foodLevel = (food/preds) * (Math.sqrt(food + preds));
        var foodx = (foodLevel) / (foodLevel - 1);
        return ((this.environment + this.age) / 2) * foodx;
    }
}
function update()
{
    var randEnv = Math.floor((Math.random() * 10) + 1);
    var randFood = Math.floor((Math.random() * 75) + 1);
    var randPreds = Math.floor((Math.random() * 100) + 1);
    return i.detSurvivability(randFood, randPreds, randAge, randEnv);
}

function run(su) 
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    if (su > 0)
    {
        radius = radius + 8;
        ctx.beginPath();
        ctx.arc(150, 150, radius, 0, 2*Math.PI);
        ctx.stroke();
    }
    else
    {
        radius = radius - 5;
        if (radius > 0)
        {
            ctx.beginPath();
            ctx.arc(150, 150, radius, 0, 2*Math.PI);
            ctx.stroke();
        }
    }
    setInterval(run(update()), 1000);
}

run(update());

这是HTML：

<!DOCTYPE html>
<html>
<body>

    <canvas id="myCanvas" width="500" height="500" style="border:1px solid      #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <script type="text/javascript" src="evolution.js"></script>
</body>
</html>

每次更新后我应该清除画布的最佳方式是什么，而不是一次打印所有圈子？

Answer 1

使用run类似

的方式调用setInterval函数

 setInterval(function (){
    run(update());
 }, 1000);

您使用run编写setInterval(run(update()), 1000); }的方式是执行的，而不是间隔一秒。

var canvas = document.getElementById("evolutionCanvas");
var randAge = Math.floor((Math.random() * 35) + 1);
var i = new Organism();
var radius = 75;

function change()
{
   document.getElementById("test").innerHTML = "this was pressed";
}

function Organism(env, age, food, preds)
{
    this.environment = env;
    this.age = age;
    this.food = food;
    this.preds = preds;
    this.detSurvivability = function(food, preds, age, env)
    {
        var foodLevel = (food/preds) * (Math.sqrt(food + preds));
        var foodx = (foodLevel) / (foodLevel - 1);
        return ((this.environment + this.age) / 2) * foodx;
    }
}
function update()
{
    var randEnv = Math.floor((Math.random() * 10) + 1);
    var randFood = Math.floor((Math.random() * 75) + 1);
    var randPreds = Math.floor((Math.random() * 100) + 1);
    return i.detSurvivability(randFood, randPreds, randAge, randEnv);
}

function run(su) 
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    if (su > 0)
    {
        radius = radius + 8;
        ctx.beginPath();
        ctx.arc(150, 150, radius, 0, 2*Math.PI);
        ctx.stroke();
    }
    else
    {
        radius = radius - 5;
        if (radius > 0)
        {
            ctx.beginPath();
            ctx.arc(150, 150, radius, 0, 2*Math.PI);
            ctx.stroke();
        }
    }
    setInterval(function (){
		run(update());
	}, 1000);
}

run(update());

<canvas id="myCanvas" width="500" height="500" style="border:1px solid      #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

更新HTML画布？

1 个答案: