Question

我认为旧版本的画布具有canvas.PenPos属性，可让您查看当前笔位置的位置。我主要是将其用于调试目的并相对绘制（例如，当前位置右侧50px长的线）。目前有什么办法吗？如果没有，他们为什么要删除它？？

我所指的笔位是虚拟＆＃34;笔＆＃34;绘图上下文（例如，您可以通过调用var ctx = canvas.getContext('2d')获得）使用而不是物理笔或鼠标。

我不是想用鼠标画画。同样，这不是我想要的物理笔，它是用{{移动的虚拟笔'。 1}}

Answer 1

试试这个

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

根据w3.org，没有一种方法可以返回笔的位置。

由于.getContext（“ 2d”）方法返回一个对象，因此可以将笔位置存储为属性，并根据需要调用它们：

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

但是在创建圆弧时，您需要随后计算笔的新位置。

如何在html画布上获得笔位？

2 个答案: