Javascript 使用画布层在彼此上方绘制形状_Javascript_Html_Canvas_Mouselistener

Javascript 使用画布层在彼此上方绘制形状

javascript html canvas

Javascript 使用画布层在彼此上方绘制形状,javascript,html,canvas,mouselistener,Javascript,Html,Canvas,Mouselistener,我正在尝试创建一个交互式应用程序，使用户可以通过单击形状的不同按钮来选择他们想要的形状，然后使他们能够在画布上单击的任何位置绘制形状。这部分还可以，但是当我点击一个不同的按钮来绘制一个形状时，似乎上一个形状与新形状一起出现，并且似乎重叠了。这是照片：如您所见，矩形和圆形重叠。我曾尝试使用画布层来修复它，但现在矩形按钮不起作用，用户单击的地方也不会出现圆形，就像离它30像素远一样以下是代码： <!DOCTYPE html> <html> <head>

我正在尝试创建一个交互式应用程序，使用户可以通过单击形状的不同按钮来选择他们想要的形状，然后使他们能够在画布上单击的任何位置绘制形状。这部分还可以，但是当我点击一个不同的按钮来绘制一个形状时，似乎上一个形状与新形状一起出现，并且似乎重叠了。这是照片：如您所见，矩形和圆形重叠。我曾尝试使用画布层来修复它，但现在矩形按钮不起作用，用户单击的地方也不会出现圆形，就像离它30像素远一样

以下是代码：

<!DOCTYPE html>
<html>
<head>
 <script>

 function initiateCanvasRectangle()
 {
     var ctx = document.getElementById('myCanvas1').getContext('2d');
     ctx.canvas.addEventListener('mousemove', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;
     });

     ctx.canvas.addEventListener('click', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;

         ctx.fillRect(mouseX,mouseY,100,50);
         ctx.fillStyle = "purple";
    });

 }

 function initiateCanvasCircle()
 {
     var ctx = document.getElementById('myCanvas2').getContext('2d');
     ctx.canvas.addEventListener('mousemove', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;
     });

     ctx.canvas.addEventListener('click', function(event) {
         var mouseX = event.clientX - ctx.canvas.offsetLeft;
         var mouseY = event.clientY - ctx.canvas.offsetTop;

         ctx.beginPath();
         ctx.arc(mouseX, mouseY, 30, 0, 2 * Math.PI, false);
         ctx.fillStyle = 'pink';
         ctx.fill();
    });

 }

 function rect(){
 window.addEventListener('click', function(event) {
     initiateCanvasRectangle();
 });
 }

 function drawRect()
 {
     rect();
 }

 function circle(){
  window.addEventListener('click', function(event) {
     initiateCanvasCircle();
 });
 }

 function drawCircle()
 {
    circle();
 }

 </script>

 <style>
 BUTTON.rect {
     padding: 8px 8px 8px 32px;
     font-family: Arial, Verdana;   
     background-color: white;
     border:2px solid black;
 }

 #tbl {
     border-collapse:collapse;
 }

 </style>
</head>
<body>
<table border="1" id="tbl">
<tr><td><button class="circle" onclick="drawCircle(); return true;" style="padding:20px 40px 20px 40px;">Circle</button>
</td>
<td>
<button class="rect" onclick="drawRect(); return true;" style="padding:20px 40px 20px 40px;"></button>
</td></tr>
</table>
<p>
<div style="position: relative;">
<canvas id="myCanvas1" width="1100" height="400"  style="position: absolute; left: 0; top: 0; z-index: 0; border:1px solid black"></canvas>
<canvas id="myCanvas2" width="1100" height="400"  style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>
</body>
</html>

你能告诉我怎么修吗？任何帮助都将不胜感激。谢谢。

使用paperjs之类的库。这类库还有很多……以前经常有人问过这个问题……要修复它，你需要能够在当前鼠标位置下找到一个形状。对于圆和矩形来说，这并不难，但更复杂的形状和路径会变得更难……你能解释一下不使用库是如何做到的吗？不适用于复杂形状。注释太多了…对于矩形，基本上是：将矩形的坐标存储在列表[，]，…]中，单击时，获取单击的x和y坐标。迭代列表并找到包含该点的矩形。您将不得不面对一些问题：获取形状和点的交点，如果形状很多，则性能，z顺序…使用库，不要重新发明轮子…感谢您的解释，我将尝试它，或者我将使用库。以下是前一篇SO帖子，解释如何在画布上拖动路径图：