Question

我找到了这个有用的教程 http://www.rgraph.net/blog/2013/february/an-example-of-the-html5-canvas-ispointinpath-function.html

我将它复制到我自己的文本编辑器中，当我打开它时没有任何反应。我通过添加声明来改变它

<!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>

Answer 1

你需要一个body元素和一个canvas元素。您的脚本元素也需要位于head元素或body元素中。

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

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

编辑：此外，代码正在调用“RGraph.getMouseXY（e）”，它位于您未引用的库文件中。您可以添加对该库的引用，也可以自己获取鼠标位置。

如果要使用RGraph库的其他部分，对于绘制图表，则应添加库。要添加库，您应该遵循RGraph站点上与下载和从RGraph（http://www.rgraph.net/docs/starting-with-rgraph.html）开始相关的说明。

如果这只是一个碰巧做你想做的事情的样本，你应该自己获得鼠标位置。您可以通过更改以下行来完成此操作：

var mouseXY = RGraph.getMouseXY(e);
var mouseX  = mouseXY[0];
var mouseY  = mouseXY[1];

到这些：

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

这可能不是最强大的解决方案，但它应该足以满足您的目的。基本上你是在窗口中获取鼠标位置，然后在窗口中减去画布的左上角，这样你就可以在画布中留下鼠标位置了。

isPointinPath教程没有复制到我的电脑

1 个答案: