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 个答案: