html 画布没有,HTML5画布没有对准

所以，我有下面的代码为HTML：HTML5画布没有对准

clear

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

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

2015-05-17

zklim