这是我通过按/释放鼠标按钮在画布中绘制线条的方式。但它并不完全是我试图得到的结果:通过按下鼠标按钮,直线的起始点被设置,终点将跟随鼠标光标。但是这条线应该总是一条直线 - 而不是绘制一些曲线,就像现在要做的那样。通过释放鼠标按钮,线条完成/固定。画布通过鼠标光标绘制线条
因此,使用该应该能够以任何方向/旋转在画布上的任何位置绘制直线。按下鼠标按钮选择起点并释放直线的终点。
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = 420;
theCanvas.height = 300;
var canvasOffset = $('#paint').offset();
$('#paint').mousemove(function(e) {
if (letsdraw === true) {
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
}
});
$('#paint').mousedown(function() {
letsdraw = true;
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});
$(window).mouseup(function() {
letsdraw = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="paint"></canvas>
近乎完美:我当然想保持完成绘制的线条。用户应该能够用这种方法绘制三条线。 – user3142695
那么你需要跟踪你想要保留的绘制线条,并在每个鼠标移动时重绘它们。 – maioman