Question

我刚开始使用HTML5。我在跟踪鼠标后遇到问题。如果我不clearRect（如果我删除行context.clearRect（0,0，canvas.width，canvas.height）;）它的工作原理。任何想法？我附上了代码。感谢

<html>
<head>
    <title>Test</title>
</head>
<body>
    <canvas id="myCanvas" width="1000" height="600" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">

        window.onload = function()
        {

        };

        function captureMousePosition(evt) 
        {
            var c = document.getElementById("myCanvas");
            var context = c.getContext("2d");

            context.clearRect(0, 0, canvas.width, canvas.height);
            context.strokeStyle = 'rgba(0,153,255,0.4)';  
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(evt.x, evt.y);
            context.stroke();         
        }
        document.captureEvents(Event.MOUSEMOVE);
        document.onmousemove = captureMousePosition;

    </script>
</body>

Answer 1

context.clearRect(0, 0, canvas.width, canvas.height);

将清除整个画布，从而擦除到目前为止画布上的线条。

一种解决方案是在开始绘图之前仅清除画布一次。例如，在window.onLoad（）事件中清除画布，然后在开始新绘图时再次清除。

第二个解决方案是将每个鼠标移动存储在一个长数组中，并在每一帧重绘整行。

编辑：更新以下有关您的说明。由于clearRect代码中的语法错误，代码不起作用。您使用未定义的'canvas'。

context.clearRect(0, 0, c.width, c.height);

诀窍！

Answer 2

我为你的问题创建了一个jsFiddle。对我来说问题出在evt.x和evt.y中，它们是未定义的。我已经粘贴了自己的函数来获取鼠标坐标。您可以使用简单的方法，但这是最可靠的方式。

http://jsfiddle.net/g9xQ2/

HTML5 Canvas动画clearRect

2 个答案: