我试图在画布中绘制并改变div大小 但是我无法从鼠标点精确绘制,鼠标和线之间有一定的距离,实际绘图就在这里。
CSS
canvas {
border: 1px solid #ccc;
transform: scale(0.5)
}
JS
var el = document.getElementById('c');
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function (e) {
isDrawing = true;
ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function (e) {
if (isDrawing) {
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
}
};
el.onmouseup = function () {
isDrawing = false;
};
HTML
<canvas id="c" width="500" height="300"></canvas>
答案 0 :(得分:2)
您需要从鼠标位置减去画布的左侧和顶部,并将所有内容乘以2(或任何比例的倒数)。
var rect = el.getBoundingClientRect();
// code here
ctx.moveTo((e.clientX - rect.left) * 2, (e.clientY - rect.top) * 2);
// code here
ctx.lineTo((e.clientX - rect.left) * 2, (e.clientY - rect.top) * 2);
此处更新了jsfiddle - &gt; http://jsfiddle.net/Lqbeqjzb/7/
编辑:根据评论改变你的小提琴 - &gt; https://jsfiddle.net/pb5ckhjm/4/
答案 1 :(得分:0)
尝试使用鼠标悬停
el.onmouseover = function (e) {
isDrawing = true;
ctx.moveTo(e.clientX, e.clientY);
};
让我知道这就是你想要的