Javascript HTML5画布：用交叉线替换光标_Javascript_Html_Canvas

Javascript HTML5画布：用交叉线替换光标

javascript html canvas

Javascript HTML5画布：用交叉线替换光标,javascript,html,canvas,Javascript,Html,Canvas,我试图用两条垂直线替换画布中的光标：一条水平线和一条垂直线。示例如下：我需要做三件事 1）隐藏光标 2）画交叉线 3）在鼠标移动时删除旧线，并根据新的鼠标位置绘制新线以下代码是实现#2和#3的非性能方式（每次鼠标移动时重新渲染整个画布的速度都非常慢）：所以我的问题是： 1）如何隐藏光标但仍显示线条 2）是否有一种方法可以只重新渲染交叉线，而不是每次鼠标移动时都重新渲染整个画布？谢谢 ad1 我没有测试它，但我认为可以通过将CSS中的光标图像更改为白色1x1图像来隐藏光标公元2年

我试图用两条垂直线替换画布中的光标：一条水平线和一条垂直线。示例如下：

我需要做三件事

1）隐藏光标

2）画交叉线

3）在鼠标移动时删除旧线，并根据新的鼠标位置绘制新线

以下代码是实现#2和#3的非性能方式（每次鼠标移动时重新渲染整个画布的速度都非常慢）：

所以我的问题是：

1）如何隐藏光标但仍显示线条

2）是否有一种方法可以只重新渲染交叉线，而不是每次鼠标移动时都重新渲染整个画布？谢谢

ad1

我没有测试它，但我认为可以通过将CSS中的光标图像更改为白色1x1图像来隐藏光标

公元2年

使用以下方法创建自定义光标并保持性能：

在主绘图画布上创建第二个画布
在两个画布上隐藏系统鼠标光标
在顶部画布上绘制/移动X光标，而不移动其他内容

示例代码和演示：


正文{背景色：象牙；}
#包装器{位置：相对；}
#画布，#游标{位置：绝对；游标：无；}
#画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“游标”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#游标”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
$（“#游标”）.mousemove（函数（e）{handleMouseMove（e）；}）；
功能手柄移动（e）{
e、 预防默认值（）；
e、 停止传播（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
clearRect（0,0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（mouseX，mouseY-15）；
ctx.lineTo（mouseX，mouseY+15）；
ctx.moveTo（mouseX-15，mouseY）；
ctx.lineTo（鼠标+15，鼠标）；
ctx.stroke（）；
}
}); // end$（函数（）{}）；

1：谢谢你的回复markE。这种分层方法的问题是，我无法再将mousemove事件绑定到底层，因为顶层可以说是“阻止它”。如果mousemove函数位于两层之上，有没有办法让它们在这两层上都运行？请注意，将其标记为正确，因为它确实解决了最初的问题。谢谢@JonCursi您可以在顶层侦听鼠标事件，并使用这些事件处理程序在底部画布上绘制。干杯太棒了，工作起来很有魅力！谢谢你的帮助！

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
  canvas.addEventListener('mousemove', function(evt) {
    // clear the canvas
    ctx.clearRect(0, 0, xsize, ysize);
    // re-draw the base
    drawCanvas();
    var mousePos = getMousePos(canvas, evt);
    // draw vertical line
    ctx.beginPath();
    ctx.moveTo(mousePos.x,0);
    ctx.lineTo(mousePos.x,ysize);
    ctx.stroke();
    ctx.closePath();
    // draw horizontal line
    ctx.beginPath();
    ctx.moveTo(0,mousePos.y);
    ctx.lineTo(xsize,mousePos.y);
    ctx.stroke();
    ctx.closePath();
  }, false);

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{position:relative;}
    #canvas,#cursor{position:absolute; cursor:none;}
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("cursor");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#cursor");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    $("#cursor").mousemove(function(e){handleMouseMove(e);});


    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.beginPath();
      ctx.moveTo(mouseX,mouseY-15);
      ctx.lineTo(mouseX,mouseY+15);
      ctx.moveTo(mouseX-15,mouseY);
      ctx.lineTo(mouseX+15,mouseY);
      ctx.stroke();
    }


}); // end $(function(){});
</script>
</head>
<body>
    <div id='wrapper'>
        <canvas id="canvas" width=300 height=300></canvas>
        <canvas id="cursor" width=300 height=300></canvas>
    </div>
</body>
</html>