Question

我正在尝试使用Javascript将我的画布重置为原始状态。但按下确定时动作不起作用。按下它时会给我一个对话框，但它不会将画布重置为原始状态。

＆＃13;

<!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>

＆＃13;

Answer 1

使用context.clearRect清除画布。

请注意，您需要获取画布的上下文，因为上下文具有绘图（和清除）方法 - 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 个答案: