Question

我创造了一个小游戏，其中玩家必须找到我在图片中某处种植的角色。我这样做是为了让这张照片成为画布元素的背景图片。然后我绘制了一个覆盖整个画布的黑色矩形，这样就无法看到背景图像。最后，我创建了一个名为clearCircle的函数，它清除黑色矩形的圆形区域，以便背景图像仅在该区域内可见。

最终，我真的希望将clearCircle函数的坐标更改为鼠标在画布上的位置，并随着鼠标不断移动。当工作正常时，当鼠标在画布上时，这应该会产生几乎闪电般的暗影效果。

*我有一个事件监听器，它包含＆＃34; mousemove＆＃34;虽然它似乎不适用于我写的其他代码。我对编程比较陌生，所以很有可能我的代码的其他部分也有缺陷。

这是我的代码：

<!DOCTYPE HTML>
<html><head>
<title>Where's Lumpy Space Princess?</title>
<meta charset="utf-8">
<title>Canvas Background through CSS</title>
<style type="text/css" media="screen">
a {
color: white;
}
.footer { 
        text-align:center;
        position:fixed; 
        bottom: 0px; 
        } 
canvas { background:url(cave.gif) }
  body {
  background-color: black;
  color: white;
        }
</style>
</head>
<body>
<center>
<h1> Where's Lumpy Space Princess?</h1>
<p>"Oh my glob you guys, I'm lost!"</p>
<img src="lspsay.gif">
<h2> Instructions:</h2>
<h3> L.S.P. is lost in the dark cave and can't find her way out!               Fortunately, you can guide her with your flashlight!<br>
But first, you have to find her.<br>
When you find her, click on the link at the bottom of the page to move on. </h3>
<canvas id="canvas" width="1000" height="750">
Your browser does not support the HTML5 canvas tag.
 </canvas>
<script>
var canvas
var rect
canvas=document.getElementById("canvas");
rect=canvas.getBoundingClientRect();

function getCoords(ev){

  var mx;

  var my;

   mx = ev.clientX-rect.left;

   my = ev.clientY-rect.top;

   return [mx,my]; }

 canvas.addEventListener("mousemove", getCoords, false);



 var cover = document.getElementById("canvas"), context =     cover.getContext("2d");
context.fillStyle = "black";
context.fillRect(0,0,1000,750);


function clearCircle(context,x,y,radius) {
  context.save();
  context.beginPath();
  context.arc(x, y, radius, 0, 2*Math.PI, true);
  context.clip();
  context.clearRect(x-radius,y-radius,radius*2,radius*2);
  context.restore();
 }
  while (true); {
  getCoords();
  clearCircle(context,clientX-rect,clientY-rect,/*radius=*/60);
}


</script>
<br>
<p> Image Source: http://s3.amazonaws.com/placester-    wordpress/blogs.dir/589/files/2012/08/caveman-cave-091746.jpg<p>
<br>
<a href="myfinalproject1.html">Click Here to Move On</a>
<audio autoplay>
  <source src="cave.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</center>
</body>
</html>

Answer 1

当用户将鼠标悬停在画布上时，

Mousemove将为您提供鼠标坐标。

当鼠标在画布上时，如何使用鼠标在Javascript中移动函数？

1 个答案: