我正试图用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;
};
}