Question

需要帮助使重置按钮正常工作。当您单击重置按钮时，我需要它将三角形重新定位到画布的中间。另外，如何使蓝色圆圈与大三角形和较小的红色三角形一起移动。还有另一个明显的问题，但我只想着眼于这两个问题。

<!DOCTYPE html>
<html>
    <head>
        <title>CPSC Assignment 6</title>
        <meta charset="utf-8">
        <script src="a6.js" type="text/javascript" defer></script>
    </head>
    <body onload="setUp();">
        <h2>The Adventure of Terry the Triangle</h2>
        <canvas id="myCanvas" width="500" height="500" style="border:1px solid black;">
        </canvas><br>
        <input type="button" id="reset" value="reset" onclick="reset();">
    </body>
</html>

这是JavaScript

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

let canvasLength = 500;
let mid = canvasLength / 2;

let x = mid;
let y = mid; 
let dir;

function setUp() {
    drawTerry(x, y, dir);
    addEventListener("keydown", function(event) {
        if (event.keyCode == 37) {
            x = x - 10;
            if(x <= 10) {
                ctx.clearRect(0, 0, canvasLength, canvasLength)
                x = 0;
            }
        }

        if (event.keyCode == 38) {
            y = y - 10;
            if(y <= 10) {
                ctx.clearRect(0, 0, canvasLength, canvasLength)
                y = 0;
            }

        }

        if (event.keyCode == 39) {
            x = x + 10;
            if(x <= 10) {
                ctx.clearRect(0, 0, canvasLength, canvasLength)
                x = 0;
            }
        }

        if (event.keyCode == 40) {
            y = y + 10;
            if(y <= 10) {
                ctx.clearRect(0, 0, canvasLength, canvasLength)
                y = 0;
            }
        }


        drawTerry(x, y, dir);
    })
}

function reset() {
    ctx.clearRect(0, 0, canvasLength, canvasLength);
    setUp();
}

function drawTerry(x, y, dir) { 
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(-30 * Math.PI / 180);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 50);
    ctx.rotate(60 * Math.PI / 180);
    ctx.lineTo(0, 50);
    ctx.lineTo(0, 0);
    ctx.stroke();
    ctx.restore();

    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(-30 * Math.PI / 180);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 8);
    ctx.rotate(60 * Math.PI / 180);
    ctx.lineTo(0, 8);
    ctx.lineTo(0, 0);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    ctx.save();
    ctx.beginPath();
    ctx.arc(mid, mid + 25, 3, 0, 2 * Math.PI);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
    ctx.restore();
}

如何使重置按钮在画布上正常工作

0 个答案: