Question

我试图在javascript中制作一种物理程序但是当它结束时我想重新加载它。我想这样做而不重新加载页面（如果这是可能的..）。它是计划在按钮中获取一个javascript代码来重新加载它。

这是我在网站上的尝试：tap.96.lt

我希望我足够清楚，谢谢你的帮助！

代码：

<html>
<head>

    <style>
#my_canvas {
max-width: 98%;
max-height: 98%;
height: auto;
width: auto;
margin:auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:white;
border: black 3px solid;
}
#center {
max-width: 66.5%;
max-height: 95%;
height: auto;
width: auto;
margin:auto;
background:;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Body {
background-color: slategrey;
}    
    </style>

</head>

<body>

    <script type="text/javascript">

function Canvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var snelheid = 20;
var balpic = new Image();
var grondpic = new Image();
balpic.src = "bal.png";
grondpic.src = "grond.png";

function reset() {

}

function blok(){
    this.h = 100, this.w = 100, this.x = (ctx.canvas.width*0.5)-(this.w*0.5), this.y =     (ctx.canvas.height*0.2)-(this.h*0.5), this.color = "Blue", this.dir = "down", this.valsnel     = 0, this.tijd = 0, this.afstand = 0, this.src = balpic;
    this.draw = function() {

        //plaats berekenen
            // kijken of blok de grond raakt
            if(grond.y-9<=this.y+this.h){this.dir = "up";};
            // kijken of blok niet uit scherm is
            if(this.y<=0){this.dir = "down";};
            // valsnelheid mag niet negatief zijn
            if(this.valsnel<=0){this.dir="down"}
            // blok mag niet ver onder de grond komen
            if(grond.y+15<=this.y+this.h){this.dir = "stil";};

        //valsnelheid berekenen
            // tijd berekenen
            if(this.dir=="down"){this.tijd = this.tijd+0.2;};
            if(this.dir=="up"){this.tijd = this.tijd-0.5};
            if(this.dir=="stil"){this.tijd = 0};

        this.valsnel = (9.81*this.tijd)+0.0000000001

        if(this.dir=="up"){this.y=this.y-this.valsnel};
        if(this.dir=="down"){this.y=this.y+this.valsnel};
        if(this.dir=="stil"){this.y=this.y}

        //tekenen
        //ctx.fillStyle = this.color;
        //ctx.fillRect(this.x,this.y,this.w,this.h);

        ctx.drawImage(this.src,this.x,this.y,this.w,this.h);

        //alert("y is "+ this.y +" en tijd is "+ this.tijd +" en valsnelheid is "+     this.valsnel +" en de afstand is "+ this.afstand)
    }
}

function grond(){
    this.w = ctx.canvas.width, this.x = 0, this.y = ctx.canvas.height*0.8, this.h =     ctx.canvas.height*0.2, this.color = "black", this.src = grondpic;
    this.draw = function() {
        //tekenen
        //ctx.fillStyle = this.color;
        //ctx.fillRect(this.x,this.y,this.w,this.h);

        ctx.drawImage(this.src,this.x,this.y,this.w,this.h);
    }
}

// alle functies
var blok = new blok();
var grond = new grond();

function draw() {
    ctx.save();
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);


    //draw
    grond.draw();
    blok.draw();
    //draw


    ctx.restore();
}

var animateInterval = setInterval(draw,snelheid);


document.addEventListener('mousemove', function(event){
    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth
    y = w.innerHeight|| e.clientHeight
    var mouseX = event.clientX - ((x-ctx.canvas.width)*0.5)
    var mouseY = event.clientY - ((y-ctx.canvas.height)*0.5)
    var status = document.getElementById('status');


    status.innerHTML = mouseX+" | "+mouseY+" screen width "+x+"  "+y;
});
}

window.addEventListener('load', function(event) {
Canvas();
});
    </script>
    <h2 id="status"></h2>
    <input id="clickme" type="button" value="clickme" onclick="canvas()" />
    <div id="center">
    <canvas id="my_canvas" width="700" height="1000">
        Please get a new browser to watch canvas!
    </canvas>
    </div>
</body>
</html>

Answer 1

清除在画布上绘制的间隔。
重新启动图纸。

对于这两个步骤，请使用这些行填充重置功能。</ p>
```
function reset() {
    clearInterval(animateInterval);
    Canvas();
}
```
而是在按钮html中定义onclick事件，在Canvas（）函数中定义onclick事件。否则你不能在canvas函数中调用reset（）方法。

对于此步骤，在重置功能后添加此行。
```
document.getElementById('clickme').onclick = reset;
```
然后从按钮html中删除onclick事件定义
```
<input id="clickme" type="button" value="clickme">
```

如何重置我的Javascript程序？

1 个答案: