使用对话框重置画布

Question

I am trying to use Javascript to reset my canvas to its original state. 我正在尝试使用Javascript将画布重置为其原始状态。 But the action does nothing when Ok is pressed. 但是，当按下“确定”时，该动作不起作用。 It gives me a dialog box when it is pressed, but it does not reset the canvas to its original state. 当它被按下时，它会给我一个对话框，但不会将画布重置为其原始状态。

 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var GAME_SPEED = 1000 / 60; //game rate var x = 100; var y = 100; var sideLength = 10; var leftKey = false; var rightKey = false; var upKey = false; var downKey = false; var spaceKey = false; var aKey = false; var sKey = false; var wKey = false; var dKey = false; var enterKey = false; var bX = 100; var bY = 100; var sideLengthZ = 10; var ctx; window.onload = function() { c = document.getElementById("myCanvas"); c.width = window.innerWidth * 0.9; c.height = window.innerHeight * 0.9; ctx = c.getContext('2d'); window.setInterval(function() { draw(); draw2(); }, GAME_SPEED); } document.onkeyup = function(event) { event.preventDefault(); switch (event.keyCode) { case 37: leftKey = false; break; case 39: rightKey = false; break; case 38: upKey = false; break; case 40: downKey = false; break; case 32: spaceKey = false; break; case 65: aKey = false; break; case 83: sKey = false; break; case 68: dKey = false; break; case 87: wKey = false; break; case 13: enterKey = false; break; } } document.onkeydown = function(event) { event.preventDefault(); switch (event.keyCode) { case 37: leftKey = true; break; case 39: rightKey = true; break; case 38: upKey = true; break; case 40: downKey = true; break; case 32: spaceKey = true; break; case 65: aKey = true; break; case 83: sKey = true; break; case 68: dKey = true; break; case 87: wKey = true; break; case 13: enterKey = true; break; } } function draw() { if (leftKey == true) { x--; } if (rightKey == true) { x++; } if (upKey == true) { y--; } if (downKey == true) { y++; } if (spaceKey == true) { sideLength++; } ctx.fillStyle = "#000000"; ctx.fillRect(x, y, sideLength, sideLength); } function draw2() { if (aKey == true) { bX--; } if (dKey == true) { bX++; } if (wKey == true) { bY--; } if (sKey == true) { bY++; } if (enterKey == true) { sideLengthZ++; } var b = document.getElementById("myCanvas"); var cntxt2 = ctx; ctx.fillStyle = "#F00000"; ctx.fillRect(bX, bY, sideLengthZ, sideLengthZ); } function itReset() { var erase = confirm("Are you sure you want to delete?"); if (erase == true) context.clearRect(); else return false; } var ctx = document.querySelector("myCanvas").getContext("2d"), angle = Math.random() * 360, // start angle (for HSL) angleDlt = 60, // 60° ahead step = 1; // "speed" for change function createGradient() { var gr = ctx.createLinearGradient(0, 0, 500, 0); // create gradient gr.addColorStop(0, "hsl(" + (angle % 360) + ",100%, 50%)"); // start color gr.addColorStop(0.5, "hsl(" + ((angle + (angleDlt/2)) % 360) + ",100%, 50%)"); gr.addColorStop(1, "hsl(" + ((angle + angleDlt) % 360) + ",100%, 50%)"); ctx.fillStyle = gr; // set as fill style ctx.fillRect(0, 0, 500, 500); // fill area } </script> </head> <body> <!--Marlon Jacques --> <canvas id="myCanvas" style="border: 5px solid"> Your browser does not support the canvas element. </canvas> <button onclick="itReset()">Reset</button> </body> </html>

Answer 1

Use context.clearRect to clear the canvas. 使用context.clearRect清除画布。

Note that you need to get the context for your canvas because the context has the drawing (and clearing) methods--the canvas element itself does not have those methods. 请注意，您需要获取画布的上下文，因为上下文具有绘制（和清除）方法-canvas元素本身没有这些方法。

function itReset(){
    var erase = confirm("Are you sure you want to delete?");
    if (erase == true){
        ctx.clearRect(0,0,c.width,c.height);
    }else{
        return false;
}

使用对话框重置画布

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-12 17:14:12

使用对话框重置画布

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-12 17:14:12

解决方案1
0 已采纳 2015-03-12 17:14:12