javascript - 线条与背景的对比色(Fabric JS 和 HTML5 Canvas)

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我正在使用 FabricJS，我需要根据背景对比虚线的颜色。示例:对于同一条虚线，如果背景为白色，则线条为蓝色，如果背景为蓝色，则线条为白色。

Canvas 背景颜色可以改变，但如果是白色，我可以添加一个蓝色矩形并在整个 Canvas 上添加一个分隔线(虚线)。

Answer 1

根据您的背景提供不同的答案

你知道背景颜色吗？

如果是，只需根据已知的背景颜色编写一些条件破折号颜色即可。

如果没有，您可以使用 var a = context.getImageData(dashX,dashY,1,1).data 获取破折号点处的像素 RGBA 颜色设置适当对比的破折号颜色。您将得到一个 4 元素数组，其中包含像素红色、绿色、蓝色和 alpha 值。

另一个可能的问题

如果您的背景不是单色的(例如，图像)，就会出现问题。那么你可能需要做浅色+深色的破折号。您可以通过指定带有黑色阴影的白色破折号来做到这一点(阴影具有 2 像素模糊，因为 1 像素模糊通常是锯齿状的)。

这里是示例代码和演示，展示了如何绘制双色虚线:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

ctx.lineWidth=3;
ctx.setLineDash([15, 5]);

ctx.fillStyle='black';
ctx.fillRect(0,0,cw,ch/2);
ctx.fillStyle='white';
ctx.fillRect(0,ch/2,cw,ch/2);

dualDashline(0,50,300,50);
dualDashline(0,250,300,250);
dualDashline(0,75,300,200);

function dualDashline(x0,y0,x1,y1){
  ctx.shadowColor='white';
  ctx.shadowBlur=2;
  ctx.strokeStyle='black';
  ctx.beginPath();
  ctx.moveTo(x0,y0);
  ctx.lineTo(x1,y1);
  ctx.stroke();
  ctx.stroke();
  ctx.stroke();
}

body{ background-color: ivory; padding:10px;}
#canvas{border:1px solid red; margin:0 auto; }

<h4>Dual colored dashed lines</h4>
<canvas id="canvas" width=300 height=300></canvas>