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

如何用坐标存储颜色？

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

和DrawAll：

async.series

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

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

1 个答案: