Javascript 动态更改鼠标光标大小_Javascript_Css_Html

Javascript 动态更改鼠标光标大小

javascript css html

Javascript 动态更改鼠标光标大小,javascript,css,html,Javascript,Css,Html,我目前正在从事一个项目，其中web应用程序的鼠标光标是一个半径为r的圆，其中r可以由用户更改。光标只需出现在页面上的特定元素中，但该元素仍应能够接收用户的单击根据我的想象，我唯一的选择是使用javascript来更改光标图像；然而，这将需要为用户所拥有的每个可能的r选择一个图像或者我可以让一个canvas元素跟随光标，它将绘制一个半径为r的圆，但是，我不确定原始元素是否仍然会以这种方式收到单击有什么想法吗？有没有我错过的更好的技巧？去用画布吧。正如您已经说过的，使用不同的鼠标光标图片将是一

我目前正在从事一个项目，其中web应用程序的鼠标光标是一个半径为r的圆，其中r可以由用户更改。光标只需出现在页面上的特定元素中，但该元素仍应能够接收用户的单击

根据我的想象，我唯一的选择是使用javascript来更改光标图像；然而，这将需要为用户所拥有的每个可能的r选择一个图像

或者我可以让一个canvas元素跟随光标，它将绘制一个半径为r的圆，但是，我不确定原始元素是否仍然会以这种方式收到单击

有什么想法吗？有没有我错过的更好的技巧？

去用画布吧。正如您已经说过的，使用不同的鼠标光标图片将是一件麻烦的事情

每当javascript事件发生时，它都会发生在所有元素中。也就是说，如果在div内部有一个链接，并且该链接被单击，那么该链接和div都会收到单击事件。（但我不知道我脑子里是怎么想的）

去用画布吧。正如您已经说过的，使用不同的鼠标光标图片将是一件麻烦的事情

你可以用canvas很容易地做到这一点

将要接收单击的元素放置在画布上

跟踪顶层（接收单击的元素）上的鼠标位置，并使用这些鼠标位置在下面的画布上绘制

以下是我为您编写的一些代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

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


测试
#保持{边距：0自动；宽度：500px；高度：500px；边框：1px实心#000；}
#画布{float:left；}
#顶层{位置：绝对；z索引：1；宽度：500px；高度：500px；光标：十字线；}








var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
功能跟踪鼠标（事件）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.clearRect（0,0500500）；
this.r=25；//圆的半径
这个.x；
这个.y；
this.x=event.clientX-document.getElementById（'canvas'）.offsetLeft；
this.y=event.clientY-document.getElementById（'canvas'）.offsetTop；
ctx.strokeStyle='#000'；
ctx.lineWidth=1；
ctx.beginPath（）；
弧（this.x，this.y，this.r，0，Math.PI*2，true）；
ctx.closePath（）；
ctx.stroke（）；
};

使用canvas，您可以相当轻松地完成这项工作

将要接收单击的元素放置在画布上

跟踪顶层（接收单击的元素）上的鼠标位置，并使用这些鼠标位置在下面的画布上绘制

以下是我为您编写的一些代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>test</title>
<style type="text/css">
#hold { margin:0 auto; width:500px; height:500px; border:1px solid #000; }
#canvas { float:left; }
#top-layer { position:absolute; z-index:1; width:500px; height:500px; cursor:crosshair; }
</style>
</head>
<body>

<div id="hold">

  <canvas id="canvas" width="500" height="500"></canvas>

  <div id="top-layer" onmousemove="trackMouse(event);">
    <ul>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
      <li><a href="http://www.google.com">Test Link (takes u to google)</a></li>
    </ul>
  </div>

</div>

<script type="text/javascript">

var ctx = document.getElementById('canvas').getContext('2d');

function trackMouse(event) {
  ctx.globalCompositeOperation = "source-over";
  ctx.clearRect(0, 0, 500, 500);

  this.r = 25; // Radius of circle
  this.x;
  this.y;

  this.x = event.clientX - document.getElementById('canvas').offsetLeft;
  this.y = event.clientY - document.getElementById('canvas').offsetTop;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.stroke();
};

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


测试
#保持{边距：0自动；宽度：500px；高度：500px；边框：1px实心#000；}
#画布{float:left；}
#顶层{位置：绝对；z索引：1；宽度：500px；高度：500px；光标：十字线；}








var ctx=document.getElementById（'canvas'）.getContext（'2d'）；
功能跟踪鼠标（事件）{
ctx.globalCompositeOperation=“源代码结束”；
ctx.clearRect（0,0500500）；
this.r=25；//圆的半径
这个.x；
这个.y；
this.x=event.clientX-document.getElementById（'canvas'）.offsetLeft；
this.y=event.clientY-document.getElementById（'canvas'）.offsetTop；
ctx.strokeStyle='#000'；
ctx.lineWidth=1；
ctx.beginPath（）；
弧（this.x，this.y，this.r，0，Math.PI*2，true）；
ctx.closePath（）；
ctx.stroke（）；
};