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

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://zh.wikipedia.org/wiki/Point_in_polygon