HTML5画布没有对准

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

的我遇到的问题是当我在画布上画画时，我绘制的小方格不能与光标当前所在的位置对齐。这几乎就好像存在某种垂直/水平缩放问题，但我不知道如何解决它。

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

这样，你的钙和鼠标位置相对于画布上，而这正是我相信你正在寻找？