Question

我在这里设置了一支笔

我正在使用画布来抚摸鼠标或触摸。它没有附加jquery或jquery mobile时工作正常，但是当我附加它时，我在画布上获得了一个偏移，而且只在Y轴上获得了绘图。

我使用以下代码绘制：

var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;

el.onmousedown = function(e) {
  isDrawing = true;
  ctx.lineWidth = 10;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX, e.clientY);
  console.log(e.clientX, e.clientY);

  console.log(e);
  console.log(e.pageX,e.pageY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.layerX, e.layerY);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

似乎是什么问题。我尝试使用layerY和pageY以及screenY，但不准确。

我应该选择哪些值？

Answer 1

这是解决方案

var el = document.getElementById('c');
var jqEl = jQuery('#c')
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function(e) {
  isDrawing = true;
  ctx.lineWidth = 10;
  ctx.lineJoin = ctx.lineCap = 'round';
  ctx.moveTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
};
el.onmousemove = function(e) {
  if (isDrawing) {
    ctx.lineTo(e.clientX - jqEl.position().left, e.clientY - jqEl.position().top);
    ctx.stroke();
  }
};
el.onmouseup = function() {
  isDrawing = false;
};

jquery mobile的canvas偏移量

1 个答案: