这就是我通过按下/释放鼠标按钮在画布中绘制线条的方法。但这并不是我想要得到的:通过按下鼠标按钮,直线的起点将被设置,终点将跟随鼠标光标。但是这条线应该总是一条直线 - 而不是绘制一些曲线,就像现在这样做。通过释放鼠标按钮,线条完成/固定。
使用它应该能够在任何方向/旋转的画布上的任何地方绘制直线。按下鼠标按钮作为起点并释放直线终点。
$(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>
&#13;
答案 0 :(得分:7)
如果你想要修改画布,你需要删除画布上的内容(使用ctx.clearRect());
看看这个:
$(function() {
var letsdraw ;
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) {
ctx.clearRect(0,0,theCanvas.width,theCanvas.height);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(letsdraw.x, letsdraw.y);
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
}
});
$('#paint').mousedown(function(e) {
letsdraw = {
x:e.pageX - canvasOffset.left,
y:e.pageY - canvasOffset.top
}
});
$(window).mouseup(function() {
letsdraw = null;
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="paint"></canvas>
&#13;
答案 1 :(得分:0)
你应该这样做。
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = 420;
theCanvas.height = 300;
var canvasOffset = $('#paint').offset();
var lastpoints = {
"x": 0,
"y": 0
};
$('#paint').mousemove(function(e) {
if (letsdraw === true) {
lastpoints.x = e.pageX;
lastpoints.y = e.pageY;
}
});
$('#paint').mousedown(function(e) {
letsdraw = true;
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});
$('#paint').mouseup(function(e) {
ctx.lineTo(lastpoints.x - canvasOffset.left, lastpoints.y - canvasOffset.top);
ctx.stroke();
letsdraw = false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas id="paint"></canvas>