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

【问题标题】：How to get pen position on html canvas?如何在 html 画布上获取笔位置？
【发布时间】：2016-02-14 16:48:04
【问题描述】：

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

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

我不是想用鼠标画画。再说一次，这不是我要找的实体笔，而是用ctx.moveTo(x,y)移动的虚拟笔

【问题讨论】：

Canvas HTML5 real mouse position的可能重复
笔位不是鼠标位置；让我在问题中澄清一下。

标签： javascript html canvas

【解决方案1】：

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

但在创建弧线时，您需要在之后计算笔的新位置。

【讨论】：

【解决方案2】：

试试这个

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

&lt;canvas id="pad" height="200" width="200"&gt;

【讨论】：

我试图找到绘图上下文笔的位置，而不是用鼠标绘图。