如何在html画布上获取笔位置？

Question

I think an older version of canvas had a canvas.PenPos property that let you see where the current pen location is. I'm mostly going to use this for debugging purposes and to draw relatively (eg a line 50px long to the right of the current position). Is there any way to do this currently? If not, why did they remove it...?

The pen position I'm referring to is the virtual "pen" that a drawing context (that you would get for example by calling var ctx = canvas.getContext('2d') ) uses, rather than a physical pen or mouse.

I am not trying to draw with a mouse. Again, this is not a physical pen I'm looking for, it's the virtual pen that is moved with ctx.moveTo(x,y)

Answer 1

try this

 window.onload =function(){ var pad = document.querySelector("#pad"); var pctx = pad.getContext('2d'); pad.addEventListener("mousemove",function(e) { position = getPosition(pad,e); pctx.clearRect(0, 0, pad.width, pad.height); pctx.fillText("x: "+position.x +", y:" + position.y, 10, 10); })} function getPosition(p,e) { var a = p.getBoundingClientRect(); return { x : e.clientX - a.left, y : e.clientY - a.top }; }

 #pad { border:thin solid black; }

 <canvas id="pad" height="200" width="200">

Answer 2

According to w3.org , there isn't a method that returns the pen position.

Because the .getContext("2d") method returns an object, you can store the pen position as properties and call them as needed:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();

//Start position
ctx.x = 100;
ctx.y = 100;
ctx.moveTo(ctx.x, ctx.y);
ctx.x = ctx.x + 100;
ctx.y = ctx.y + 300;
ctx.lineTo(ctx.x, ctx.y);
ctx.stroke();

When creating an arc though, you would need to calculate the pen's new position afterward.