为什么在调用clearRect（）之后不能写入画布？

Question

我是JavaScript的新手，并认为我会为我的侄子们写一个测验，因为他们真的很喜欢星球大战。 我设法做了一个“标题屏幕”，现在想在屏幕上写一张图片和三个可能的答案。 但是在通过mouseup调用清除屏幕后，我似乎无法在画布上写任何东西。 这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title> star wars  </title>
</head>

<body>

<canvas id="myCanvas" width="1400" height="700"  style="border:2px solid black"></canvas>

<script type="text/javascript">
//print intro screen
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var pic = new Image();
pic.onload = function(){
ctx.drawImage(pic, 0,0);

}
pic.src="http://i.imgur.com/wZHhlqt.png";


canvas.onmouseup = function(){
ctx.clearRect(0, 0, 1400, 700);
}

ctx.font = '40pt Calibri';
ctx.fillStyle = 'blue';
ctx.fillText("Question 1 ", 140, 440);

</script>
</body>
</html>

Answer 1

http://jsbin.com/koj/1/edit

canvas.onmouseup = function(){
   ctx.clearRect(0, 0, 1400, 700);
   q1();
}

function q1(){
  ctx.font = '40pt Calibri';
  ctx.fillStyle = 'blue';
  ctx.fillText("Question 1 ", 140, 440);
}

这是因为您需要调用一个函数，该函数将在单击时执行某些操作，而不是在第一次运行时执行。 因此，分开您的功能，相应地调用它们。 您可能还需要一个柜台，以了解下一个问题是什么，依此类推...

为什么在调用clearRect（）之后不能写入画布？

问题描述

1 个解决方案

解决方案1
0 2014-02-16 12:41:51

为什么在调用clearRect（）之后不能写入画布？

问题描述

1 个解决方案

解决方案1 0 2014-02-16 12:41:51

解决方案1
0 2014-02-16 12:41:51