代码之家 › 专栏 › 技术社区 › wendykr

JavaScript画布和鼠标位置

mouse position canvas html javascript

wendykr · 技术社区 · 7 年前

我正试图用JavaScript在HTML5中制作一个绘图板,但是工具(如铅笔、画笔等…)位置和我想象的不同。

我发现它是不同的,因为位图(?)所以我正试图从其他人已经问过的答案中解决这个问题,但我失败了。。

如何找到鼠标的正确位置?

这是我的HTML代码(我使用bootstrap)

<div class="col-sm-10">
    <canvas id="c" width="900" height="500"></canvas>
</div>

这是js(铅笔代码不是我的,我在网上找到的)

var el = document.getElementById('c'); //ìºë²ì¤
var ctx = el.getContext('2d');  //ë¶

function pencil () {
    var pos = getMousePos(el, e);

    el.onmousedown = function() {
      isDrawing = true;
      ctx.moveTo(pos.X, pos.Y);
    };

    el.onmousemove = function() {
      if (isDrawing) {
        ctx.lineTo(pos.X, pos.Y);
        ctx.stroke();
      }
    };

    el.onmouseup = function() {
      isDrawing = false;
    };
}

1 回复 | 直到 7 年前

Jonathan Rys 7 年前

我找到了getMousePos函数 here 而且它看起来和你正在做的事情一样有效。但是,它接受了一个论点 e (事件)不会定义您在何处使用它。尝试将呼叫移动到 getMousePos 在定义事件的事件处理程序中。

而且 isDrawing 未定义。

var el = document.getElementById('c');
var ctx = el.getContext('2d');  //ë¶
ctx.strokeStyle = "#FF0000";

function pencil () {
  var isDrawing = false;

  el.onmousedown = function(e) {
    var pos = getMousePos(el, e);
    isDrawing = true;
    ctx.moveTo(pos.x, pos.y);
  };

  el.onmousemove = function(e) {
    var pos = getMousePos(el, e);
    if (isDrawing) {
      ctx.lineTo(pos.x, pos.y);
      ctx.stroke();
    }
  };

  el.onmouseup = function() {
    isDrawing = false;
  };
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

pencil()

<div class="col-sm-10">
    <canvas id="c" width="900" height="500"></canvas>
</div>

推荐文章

Mohammad Eftekharian · 在python中在两个画布之间移动图像

4 月前

PPExpress · 设置默认值后动态更新jscolor调色板

1 年前

Astrina · ipycanvas什么时候在画布上画画?或者如何强制?

1 年前

That New Coder · 如何在原生JavaScript中阻止精灵从画布上移动?

1 年前

walid naceri · 使用画布和javascript单击对象

1 年前

Özkan Hürcan · 节点画布registerFont在服务器上不工作

1 年前

Aswathi · 当显示画布时,Focus()和blur()一起触发firefox

1 年前

J. Maria · html2canvas不会在同一域中呈现iframe的内容

1 年前

Tung Le · 如何创建一个小地图来显示Angular中div的所有内容?

1 年前

Yahia · 为什么ctxpixel没有绘制图像

1 年前