Javascript 上下文。圆弧未在指定坐标上绘制_Javascript_Asp.net_Html_Canvas

Javascript 上下文。圆弧未在指定坐标上绘制

javascript asp.net html canvas

Javascript 上下文。圆弧未在指定坐标上绘制,javascript,asp.net,html,canvas,Javascript,Asp.net,Html,Canvas,当用户在画布中单击并移动鼠标时，我试图画一个圆圈。如果我在.arc（）上使用随机坐标绘制，但如果我使用鼠标坐标，则不会绘制如果我尝试这样做： JS: var=false； var x=0； var y=0； var ye=真；函数加载（事件）{ 调试器；var x2=event.pageX； var y2=event.pageY；如果（x2>10）{ var-num； } document.getElementById（“”）.innerText=“X=“+x2+”Y=“+y2；如果（

当用户在画布中单击并移动鼠标时，我试图画一个圆圈。如果我在

.arc（）

上使用随机坐标绘制，但如果我使用鼠标坐标，则不会绘制

如果我尝试这样做：

JS:


var=false；
var x=0；
var y=0；
var ye=真；
函数加载（事件）{
调试器；var x2=event.pageX；
var y2=event.pageY；
如果（x2>10）{
var-num；
}
document.getElementById（“”）.innerText=“X=“+x2+”Y=“+y2；
如果（单击）{
//调试器；document.getElementById（“”）.innerText+=“移动！”；
调试器；var canvas=document.getElementById（“”）；
var ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
弧（x，y，3，0，2*Math.PI）；
ctx.stroke（）；
x=x+1；
y=y+1；
}
}
函数down（）{
调试器；clicked=true；
}
函数up（）{
调试器；
单击=假；
}

ASP:


在这里签名

这是可行的，但是如果我用x2和y2

ctx.arc（x2，y2，3，0，2*Math.PI）替换x和y，不绘制。我也没有收到任何错误
谢谢
鼠标位置必须调整，因为它们在这里相对于页面，尽管pageX和pageY不是官方标准的一部分，在某些浏览器中可能不起作用
[pageX/pageY]此功能是非标准的，不在标准上
跟踪。不要在面向Web的生产站点上使用它：它不会
为每个用户工作。两者之间也可能存在很大的不兼容性
实现和行为在将来可能会发生变化

您可以使用以下代码来调整鼠标位置。它使用相对于客户端窗口的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。
我设法解决了这个问题！我没有画圆圈，而是画了线。在mousedown
，调用moveTo（clientX，clientY）
和mouseMove
调用lineTo（clientX，clientY）
moveTo（clientX，clientY）
这样，当用户单击我有行的初始位置时，移动时，分配最终位置并更新初始位置
JS:

var=false；
var-ctx=null；
var=null；
功能移动（事件）
{
document.getElementById（“”）.innerText=“X=“+currentX+”Y=“+currentY；
如果（单击）
{    
ctx.lineTo（event.offsetX，event.offsetY）；
ctx.moveTo（event.offsetX，event.offsetY）；
ctx.stroke（）；
x=x+1；
y=y+1；
}
}
功能关闭（事件）
{
单击=真；
var canvas=document.getElementById（“”）；
ctx=canvas.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（event.offsetX，event.offsetY）；
}
函数up（）
{
单击=假；
ctx.closePath（）；
}

ASPX：

在这里签名

在Chrome和IE9上工作。Oops我忘了用clientX/Y替换pageX/Y。我正在测试的是clientX/Y。@JoséCorretjer-Gómez啊，那么这只是使用画布的绝对区域调整坐标的问题。getBoundingClientRect（）未定义：/我将其放在相同的方法上。我甚至从mozilla开发站点复制/粘贴了这个名称，只是为了确保我写的正确，并且仍然没有定义。我正在chrome上试用，不过它说它与Chrome1及以上版本兼容。
<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>

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();                  
}

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

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