获取 html5 画布上每个绘制矩形的特定颜色

Question

这是我在 jsfiddle 上的完整代码： https://jsfiddle.net/f5z8qtcp/7/

要重现我的问题，请按照以下步骤操作：

• 单击红色边框的画布并拖动鼠标以创建一个矩形。

• 现在在画布的另一部分创建另一个矩形，您会看到所有矩形的颜色都相同，并且在创建新矩形时每个矩形的颜色都会发生变化。

我想为每个矩形获取特定的颜色。

改变颜色的部分代码是：

function drawAll(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var color_s = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
  ctx.lineWidth=1;
  ctx.strokeStyle=color_s;
  ctx.fillStyle = color_s;
  for(var i=0;i<rects.length;i++){
    var r=rects[i];
    ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
    ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
  }
}

这一行让我们生成随机颜色：

var color_s = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';

请更正我在此代码中的错误。

编辑

我通过这个小修改解决了部分问题：

function drawAll(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for(var i=0;i<rects.length;i++){
    var r=rects[i];
    var color_s = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    ctx.lineWidth=1;
    ctx.strokeStyle=color_s;
    ctx.fillStyle = color_s;    
    ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
    ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
  }
}

但是当我点击创建新矩形时，所有其他矩形的颜色都会改变。

Answer 1

用坐标存储颜色怎么样？

newRect={
    left:Math.min(startX,mouseX),
    right:Math.max(startX,mouseX),
    top:Math.min(startY,mouseY),
    bottom:Math.max(startY,mouseY),
    color: undefined
  }

和DrawAll：

    var color_s = rects[i].color ? rects[i].color : 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    rects[i].color = color_s;

JSFiddle：https://jsfiddle.net/f5z8qtcp/10/