Question

我正在尝试在画布上画一条线。我能够画线，但我希望能够动态画线。

这就是我的想法：

单击鼠标左键，我就获得了鼠标的位置并将其存储在变量x1，y1中。设置downflag = true。

然后，如果单击鼠标左键并且用户拖动鼠标，我将连续获取鼠标的位置并将其存储在x2，y2中。我希望在这里使用stroke（）连续更新该行，但似乎不起作用？有任何想法吗？？。

然后释放鼠标左键，获取鼠标的最终位置并将其存储在x2，y2中。使用笔触绘制路径。

对不起，我很无法解释我要寻找的东西。

k

<!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>

Answer 1

您的代码无效，因为您在每次鼠标移动时都从鼠标的先前位置到当前位置绘制了一条非常短的新线。

您至少需要两层，每一层都有自己的画布。

最底层是最后绘制每条线的位置。顶层是空的。

在鼠标悬停时，您设置向下标志，并将鼠标坐标存储在x1和y1处。在这一步不要画任何东西。

在鼠标移动时，如果设置了downflag标志，则将鼠标坐标存储在x2和y2，清除顶层，并在顶层上从（x1，y1）到（x2，y2）画一条线。 / p>

在鼠标移出时，清除向下标志，清除顶层，并在底层的（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);

需要帮助使用HTML在画布上画线

1 个答案: