Question

我制作了一个小画布并用路径绘制moveto（）和lineto（）命令创建了一个正方形。

所以我有一个带红色边框的正方形，我可以用fillStyle给出背景颜色，然后用fill（）获得颜色。

通过点击执行。

var c = document.createElement('canvas');
c.id = 'myCanvas';
c.style.background = "#ffffff";
c.width = "100";
c.height = "50";
document.getElementById('container').appendChild(c);

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 80);
ctx.lineTo(50, 80);
ctx.lineTo(50, 0);
ctx.lineTo(0, 0);   
ctx.strokeStyle = "red";
ctx.stroke();

var getColor2 = 0;
var getColor = 0;

c.addEventListener("click", function(){
       if(getColor2 == 0){
          ctx.fillStyle = "#ffffff";
       }
       if(getColor2 == 1){
          ctx.fillStyle = "#ff33df";
       }
       if(getColor2 == 2){
          ctx.fillStyle = "#bbbbbb";
       }
       if(getColor2 == 3){
          ctx.fillStyle = "#bb4563";
       }
       if(getColor2 == 4){
          ctx.fillStyle = "#234556";
          getColor2 = -1; 
       }

       getColor2++;
       ctx.fill();

});

https://jsfiddle.net/mafb7qhh/2/

我的问题是：当我点击画布时它也会执行。我想通过点击广场来执行。

Answer 1

您在画布中绘制的所有内容都无法“选中”，因为它不像DOM元素那样存在。如果你需要一些可点击的区域，那么SVG可以派上用场而不是画布，或者在画布上使用不可见的dom元素，并且你绘制的元素的位置/大小相同

无论如何，我做了这个小jsfiddle，如果你要使用画布来处理鼠标事件（仅适用于矩形），如果鼠标已经结束，请从矩形列表中检查。

对于更复杂的多边形，您必须使用（例如）ray casting algorithm。 https://en.wikipedia.org/wiki/Point_in_polygon

如何在画布上为对象提供背景？

1 个答案: