Question

我试图在用户点击并在画布内移动鼠标时画一个圆圈。如果我在.arc()绘图上使用随机坐标，但如果我使用鼠标的坐标则不会绘制

如果我试试这个：

JS：

<script>
        var clicked = false;
        var x = 0;
        var y = 0;

        var ye = true;

        function load(event) {

            debugger; var x2 = event.pageX;
        var y2 = event.pageY;

        if (x2 > 10) {

            var num;
        }

          document.getElementById("<% = values.ClientID%>").innerText = "X= " + x2 + " Y= " + y2;

           if (clicked) {

               //debugger; document.getElementById("<% = values.ClientID%>").innerText += " Moving!";
                   debugger; var canvas = document.getElementById("<% = canvasSignature.ClientID%>");

                   var ctx = canvas.getContext("2d");

                   ctx.beginPath();
                   ctx.arc(x, y, 3, 0, 2 * Math.PI);
                   ctx.stroke();                  

                   x = x + 1;

                   y = y + 1;


           }
    }

    function down() {

        debugger; clicked = true;
    }

    function up() {
        debugger;
        clicked = false;        
    }
</script>

ASP：

<body onmouseup ="up()">
    <div >
        <asp:Label ID ="lblSignature" runat ="server">Sign here</asp:Label>
    </div>
<canvas id ="canvasSignature" runat ="server" width="200" height="100" style="border:1px solid #000000;" onmousemove ="load(event);"  onmousedown ="down();"></canvas>

    <asp:Label ID ="values" runat ="server"></asp:Label>
    </body>

这有效但如果我用x2和y2 ctx.arc(x2, y2, 3, 0, 2 * Math.PI);替换x和y，则不会绘制。我也没有收到任何错误。

由于

Answer 1

鼠标位置必须调整，因为它们在这里相对于页面，但是pageX和pageY不是官方标准的一部分，可能在某些浏览器中不起作用。

[pageX / pageY]此功能是非标准的，不符合标准跟踪。不要在面向Web的生产站点上使用它：它不会为每个用户工作。两者之间可能存在很大的不兼容性实现和行为可能在未来发生变化。

Source

您可以使用以下代码调整鼠标位置。它使用相对于客户端窗口的clientX / Y.然后使用单击元素的绝对位置（此处为画布）来查找差异，以便鼠标位置相对于画布变为：

var ctx = canvas.getContext("2d");             // set this once in global/parent

function load(event) {

    var rect = this.getBoundingClientRect(),   // get abs. region for clicked element
        x = event.clientX - rect.left,
        y = event.clientY - rect.top;

    // plot arc
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, 2 * Math.PI);
    ctx.stroke();                  
}

唯一的缺点是，如果将其应用于画布，则必须考虑边框和填充。通常避免将这些样式应用于画布，而是将其包装在容器div中，然后将这些样式应用于div。

Answer 2

我设法搞清楚了！我没有绘制圆圈，而是画线。在mousedown上，拨打moveTo(clientX,clientY)并在mouseMove上拨打lineTo(clientX,clientY) moveTo(clientX,clientY)这样，当用户点击时，我有该行的初始位置，当他移动时，分配最终位置并更新初始位置。

JS：

<script>
    var clicked = false;

    var ctx = null;

    var canvas = null;

    function move(event)
    {
        document.getElementById("<% = values.ClientID%>").innerText = "X= " + currentX + " Y= " + currentY;

        if (clicked)
        {    
            ctx.lineTo(event.offsetX, event.offsetY);

            ctx.moveTo(event.offsetX, event.offsetY);

            ctx.stroke();               

            x = x + 1;

            y = y + 1;
        }
    }

    function down(event)
    {
        clicked = true;

        var canvas = document.getElementById("<% = canvasSignature.ClientID%>");

        ctx = canvas.getContext("2d");

        ctx.beginPath();   

        ctx.moveTo(event.offsetX, event.offsetY);
    }

    function up()
    {
        clicked = false;

        ctx.closePath();
    }

</script>

ASPX：

<div onmouseup="up();">

        <div>
            <asp:Label ID="lblSignature" runat="server">Sign here</asp:Label>
        </div>

        <canvas id="canvasSignature" runat="server" width="300" height="300" style="border: 1px solid #000000;" onmousemove="move(event);" onmousedown="down(event);"></canvas>

        <asp:Label ID="values" runat="server"></asp:Label>

</div>

适用于Chrome和IE9。

Context.Arc没有在指定的坐标上绘图

2 个答案: