这是我通过按下/释放鼠标按钮在画布上绘制直线的方法。但这并不完全是我想要的:按下鼠标按钮将设置一条直线的起点,终点将跟随鼠标指针。但是直线应始终为一条直线 - 不应像现在绘制曲线。释放鼠标按钮后,直线完成/固定。
通过这种方式,用户应该能够在画布上任何位置以任何方向/旋转绘制直线。按下鼠标按钮设置直线的起点,释放鼠标按钮设置直线的终点。
通过这种方式,用户应该能够在画布上任何位置以任何方向/旋转绘制直线。按下鼠标按钮设置直线的起点,释放鼠标按钮设置直线的终点。
$(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>