Javascript iPointInPath不复制到我的计算机的教程_Javascript_Html_Canvas

Javascript iPointInPath不复制到我的计算机的教程

javascript html canvas

Javascript iPointInPath不复制到我的计算机的教程,javascript,html,canvas,Javascript,Html,Canvas,我发现这个教程很有用我把它复制到我自己的文本编辑器中，当我打开它时，什么也没有发生。我通过添加声明对其进行了更改 <!DOCTYPE html> <html lang="en"> <head> <title>exampleMouseOver</title> </head> <script> window.onload = function (e) { var can

我发现这个教程很有用

我把它复制到我自己的文本编辑器中，当我打开它时，什么也没有发生。我通过添加声明对其进行了更改

<!DOCTYPE html>

<html lang="en">
 <head>
  <title>exampleMouseOver</title>
  </head>
<script>
    window.onload = function (e)
    {
        var canvas  = document.getElementById('cvs');
        var context = canvas.getContext('2d');

        // Draw the rectangle
        context.beginPath();
        context.rect(50,50,100,100);
        context.fill();

        context.fillStyle = 'red';

        // Draw the circle
        context.beginPath();
        context.arc(450,175, 50, 0,2 * Math.PI, false);
        context.fill();

        context.fillStyle = 'green';

        // Draw the shape
        context.beginPath();
        context.moveTo(250,100);
        context.lineTo(350,175);
        context.lineTo(325,215);
        context.lineTo(185,195);
        context.fill();



        canvas.onmousemove = function (e)
        {
            var canvas = e.target;
            var context = canvas.getContext('2d');

            // This gets the mouse coordinates (relative to the canvas)
            var mouseXY = RGraph.getMouseXY(e);
            var mouseX  = mouseXY[0];
            var mouseY  = mouseXY[1];


            // Replay the rectangle path (no need to fill() it) and test it
            context.beginPath();
            context.rect(50,50,100,100);

            if (context.isPointInPath(mouseX, mouseY)) {
                canvas.style.cursor = 'pointer';
                return;
            }
            ///////////////////////////////////////////////////////////////


            // Replay the circle path (no need to fill() it) and test it
            context.beginPath();
            context.arc(450,175, 50, 0,2 * Math.PI, false);

            if (context.isPointInPath(mouseX, mouseY)) {
                canvas.style.cursor = 'pointer';
                return;
            }
            ///////////////////////////////////////////////////////////////


            // Replay the irregular shape path (no need to fill() it) and test it
            context.beginPath();
            context.moveTo(250,100);
            context.lineTo(350,175);
            context.lineTo(325,215);
            context.lineTo(185,195);

            if (context.isPointInPath(mouseX, mouseY)) {
                canvas.style.cursor = 'pointer';
                return;
            }
            ///////////////////////////////////////////////////////////////


            // Return the cursor to the default style
            canvas.style.cursor = 'default';
        }
    }
</script>
</html>


例如鼠标盖
window.onload=函数（e）
{
var canvas=document.getElementById（'cvs'）；
var context=canvas.getContext（'2d'）；
//画矩形
context.beginPath（）；
context.rect（50,50100100）；
context.fill（）；
context.fillStyle='red'；
//画圆圈
context.beginPath（）；
弧（450175,50,0,2*Math.PI，false）；
context.fill（）；
context.fillStyle='green'；
//画形状
context.beginPath（）；
上下文。移动到（250100）；
lineTo（350175）；
lineTo（325215）；
上下文。lineTo（185195）；
context.fill（）；
canvas.onmousemove=函数（e）
{
var=e.target；
var context=canvas.getContext（'2d'）；
//这将获取鼠标坐标（相对于画布）
var mouseXY=RGraph.getMouseXY（e）；
var mouseX=mouseXY[0]；
var mouseY=mouseXY[1]；
//重放矩形路径（无需填充（））并对其进行测试
context.beginPath（）；
context.rect（50,50100100）；
if（context.isPointInPath（mouseX，mouseY））{
canvas.style.cursor='pointer'；
返回；
}
///////////////////////////////////////////////////////////////
//重放圆路径（无需填充（））并测试它
context.beginPath（）；
弧（450175,50,0,2*Math.PI，false）；
if（context.isPointInPath（mouseX，mouseY））{
canvas.style.cursor='pointer'；
返回；
}
///////////////////////////////////////////////////////////////
//重放不规则形状路径（无需填充（））并对其进行测试
context.beginPath（）；
上下文。移动到（250100）；
lineTo（350175）；
lineTo（325215）；
上下文。lineTo（185195）；
if（context.isPointInPath（mouseX，mouseY））{
canvas.style.cursor='pointer'；
返回；
}
///////////////////////////////////////////////////////////////
//将光标返回到默认样式
canvas.style.cursor='default'；
}
}

您需要一个body元素和一个canvas元素。此外，脚本元素需要位于head元素或body元素中

以下是示例使用的内容，但未包含在示例代码中：

<body>
    <canvas id="cvs" width="600" height="250" style="border: 1px solid gray; cursor: pointer;">[No canvas support]</canvas>
</body>

对这些：

var mouseX  =  e.clientX - canvas.getBoundingClientRect().left;
var mouseY  =  e.clientY - canvas.getBoundingClientRect().top;

这可能不是最健壮的解决方案，但它应该足以满足您的需要。基本上，您将获得窗口中的鼠标位置，然后减去窗口中画布的左上角，这样您就可以在画布中保留鼠标位置。

好的，太好了！我做到了，现在它真的出现了。然而，我在整个画布上得到了想要的结果，而不是我能够在Chrome上复制并修复您的问题的特定形状，有关详细信息，请参阅我的编辑。

var mouseX  =  e.clientX - canvas.getBoundingClientRect().left;
var mouseY  =  e.clientY - canvas.getBoundingClientRect().top;