我想在画布上画一条线。我能画线，但我希望能够动态绘制它。
这就是我的想法：
单击鼠标左键后，我将获得鼠标的位置并存储在变量x1，y1中。设置downflag = true。
然后，如果单击鼠标左键并且用户正在拖动鼠标，我将继续获取鼠标的位置并以x2，y2存储。我希望在这里使用stroke（）来连续更新线路，但似乎没有用？有任何想法吗？？。
然后释放鼠标左键后，获取鼠标的最终位置并存储在x2，y2中。使用笔划绘制路径。
对不起，我不好解释我在找什么..
至
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid blue;">
<p><strong>Tip:</strong> Click, Drag, Release</p>
<p id='coordinates'>null, null</p>
<p id='downcoord'>undefined, undefined</p>
<p id='upcoord'>undefined, undefined</p>
</div>
<canvas width="500" height="500" onmousemove="coords(event)" onmousedown="mousedown(event)" onmouseup="mouseup(event)" id="myCanvas" style="position: absolute; border: 1px solid black;"> Your browser does not support the canvas element. </canvas>
<script>
var x1,y1;
var x2,y2;
var coorx,coory;
var downflag;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
function coords(event){
if(downflag){ //check if clicked before drag
x2 = event.clientX-9;
y2 = event.clientY-200;
}
coorx = event.clientX-9;
coory = event.clientY-200; //keep updating x and y coord while moving mouse
var temp = document.getElementById("coordinates");
temp.innerHTML = "current coord : " + coorx + ", " + coory;
var temp = document.getElementById("downcoord");
temp.innerHTML = "start point : " + x1 + ", " + y1;
var temp = document.getElementById("upcoord");
temp.innerHTML = "end point : " + x2 + ", " + y2;
}
function mousemove(event){
if(downflag == true){
x2 = event.clientX-9;
y2 = event.clientY-200;
ctx.lineTo(x2,y2);
ctx.stroke();
}
}
function mousedown(event){
x1 = event.clientX-9;
y1 = event.clientY-200;
ctx.beginPath();
ctx.moveTo(x1,y1);
downflag = true;
}
function mouseup(event){
x2 = event.clientX-9;
y2 = event.clientY-200;
downflag = false;
ctx.lineTo(x2,y2);
ctx.stroke();
}
</script>
</body>
</html>
您的代码不起作用，因为您在每个鼠标移动上绘制一条新的非常短的线，从鼠标的前一个位置到当前位置。
您至少需要两个图层，每个图层都有自己的画布。
底层是您最终绘制每一行的位置。顶层是空的。
鼠标悬停时，设置downflag，并将鼠标坐标存储在x1和y1。在这一步不要画任何东西。
在鼠标移动时，如果设置了downflag标志，则将鼠标坐标存储在x2和y2，清除顶层，并在顶层绘制从（x1，y1）到（x2，y2）的线。
在鼠标移出时，清除向下标志，清除顶层，并在底层绘制从（x1，y1）到（x2，y2）的线。
编辑：代码示例（需要jQuery）。在https://codepen.io/locoluis/pen/JVerqO看到它的行动
HTML：
<div id="arena">
<canvas id="bg"></canvas>
<canvas id="fg"></canvas>
</div>
CSS：
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 5px;
}
#arena {
position: relative;
width: 100%;
height: 100%;
border: solid 1px black;
background: white;
}
#bg, #fg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#bg {
z-index: 1;
}
#fg {
z-index: 2;
cursor: crosshair;
}
JS：
var x1, y1, x2, y2, downflag = false;
var fg, bg, ctxFg, ctxBg;
function pendown(e)
{
x1 = e.offsetX;
y1 = e.offsetY;
downflag = true;
}
function penmove(e)
{
if(!downflag) {
return;
}
ctxFg.clearRect(0, 0, fg.width, fg.height);
x2 = e.offsetX;
y2 = e.offsetY;
ctxFg.beginPath();
ctxFg.moveTo(x1, y1);
ctxFg.lineTo(x2, y2);
ctxFg.stroke();
}
function penup(e)
{
if(!downflag) {
return;
}
downflag = false;
ctxFg.clearRect(0, 0, fg.width, fg.height);
x2 = e.offsetX;
y2 = e.offsetY;
ctxBg.beginPath();
ctxBg.moveTo(x1, y1);
ctxBg.lineTo(x2, y2);
ctxBg.stroke();
}
function init()
{
fg = document.getElementById('fg');
bg = document.getElementById('bg');
bg.width = fg.width = jQuery(fg).width();
bg.height = fg.height = jQuery(bg).height();
ctxFg = fg.getContext('2d');
ctxFg.strokeStyle = "red";
ctxBg = bg.getContext('2d');
ctxBg.strokeStyle = "black";
jQuery(fg).on('mousedown', pendown);
jQuery(fg).on('mousemove', penmove);
jQuery(fg).on('mouseup', penup);
}
window.addEventListener('load', init, false);