线条与背景的对比色（FabricJS＆amp; HTML5 Canvas）

Question

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

画布背景颜色可能会发生变化，但是使用白色，我可以添加一个蓝色矩形并在整个画布上添加一个分隔线（虚线）。

Answer 1

根据您的背景不同的答案

您知道背景颜色吗？

如果是，只需根据已知的背景颜色对某些条件短划线颜色进行编码。

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

另一个可能的问题

问题来自于你的背景不是单色 - F.ex。，一个图像。然后你可能需要进行浅色和深色破折号。您可以通过指定带有黑色阴影的白色虚线（阴影具有2px模糊，因为1px模糊通常是锯齿状的）来实现。

这是示例代码和演示如何绘制双色虚线的演示：

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>