HTML5 Canvas 未对齐

Question

所以，我有以下代码 HTML:

<canvas id='myCanvas'></canvas>
<span id='coords'></span>
<button class='clear'>clear</button>

CSS 搭配：

#myCanvas{
  width: 278px;
  height: 100px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}

还有一些 Javascript:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var mouseClicked = false;

function writeMessage(canvas, message) {
  $('#coords').text(message);
}

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

$(document).on({
  'mousedown':function(){
    mouseClicked=true;
  },
  'mouseup':function(){
    mouseClicked=false;
  }
})

$('#myCanvas').on({
  'mousemove':function(evt){
    if(mouseClicked){
        var mousePos = getMousePos(canvas, evt);
        var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        writeMessage(canvas, message);
      context.beginPath();
      context.rect(mousePos.x, mousePos.y, 1, 1);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 1;
      context.strokeStyle = 'black';
      context.stroke();
    }
  },
  'mousedown':function(evt){
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
    writeMessage(canvas, message);
  }
});

// Clear canvas
$('.clear').click(function(){
  context.clearRect(0, 0, canvas.width, canvas.height);
});

// make other text non selectable
$('#coords').disableSelection();

我遇到的问题是当我在 canvas 上绘图时，我正在绘制的小方块与光标当前所在的位置不对齐。就好像存在某种 vertical/horizontal 缩放问题，但我不确定如何解决它。

Answer 1

您快完成了，只需将您的 getMousePos 函数更改为：

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {

        x: Math.round((evt.clientX-rect.left)/(rect.right-rect.left)*canvas.width),
        y: Math.round((evt.clientY-rect.top)/(rect.bottom-rect.top)*canvas.height)
    };
}

这样你的计算器和鼠标位置就相对于 canvas，我相信你正在寻找什么？

HTML5 Canvas 未对齐

HTML5 Canvas not Aligned

html

jquery

html5-canvas