javascript - 如何为 Canvas 上的对象提供背景？

Question

我制作了一个小 Canvas ，并使用路径绘制 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/

我的问题是:当我单击 Canvas 时它也会执行。我想仅通过单击正方形来执行。

Answer 1

您在 Canvas 中绘制的所有内容都无法被“选择”，因为它不像 DOM 元素那样存在。如果您需要一些可点击区域，也许 SVG 可以代替 Canvas ，或者在 Canvas 上使用不可见的 dom 元素，其位置/大小与您绘制的元素相同

不管怎样，我做了这个小jsfiddle ，从矩形列表中检查鼠标是否位于上方，例如，如果您希望使用 Canvas 处理鼠标事件(仅适用于矩形)。

对于更复杂的多边形，您必须使用(例如)光线转换算法。 https://en.wikipedia.org/wiki/Point_in_polygon