d3.hsl 在 Safari 上失败

Question

我整理了一个简单的HTML页面：

$(document).ready(function() {  
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  canvas.width  = window.innerWidth;
  canvas.height = window.innerHeight;
 
  //ctx.fillStyle = "gray";
  ctx.fillStyle = d3.hsl(120, 0.5, 0.5);
  
  ctx.fillRect(0,0, canvas.width, canvas.height);  
});

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<canvas id="myCanvas"> </canvas>

在 Chrome 上它正确地给出了绿色背景。在 Safari（8.0.6——撰写本文时为最新版本）上，它提供黑色背景。

怎么了？

Answer 1

看起来问题与字符串强制转换有关。基本上，获得 d3.hsl 到 return 颜色字符串（在您的情况下为 "#40bf40" ）的正确方法是在 HSL 对象上调用 .toString() （请参阅 here ).所以在你的情况下，它将是

ctx.fillStyle = d3.hsl(120, 0.5, 0.5).toString()

这将解决 Safari 问题。

它在没有 .toString() 的情况下在 Chrome 中工作的原因是因为 Chrome 的 JS 引擎选择为您将其转换为字符串 - 就像 JS 将数字转换为像这样的字符串：5 + "2" // "52"。在内部它实际上是在调用 (5).toString() + "2"。 Safari 碰巧没有决定 .toString() 它，这就是它不起作用的原因。

d3.hsl 在 Safari 上失败

d3.hsl fails on Safari

safari

hsl

color-space

d3.js