d3.hsl 在 Safari 上失败答案

【问题标题】：d3.hsl fails on Safarid3.hsl 在 Safari 上失败
【发布时间】：2015-05-08 19:03:29
【问题描述】：

我整理了一个简单的 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 - 在撰写本文时为当前版本），但它提供黑色背景。

怎么了？

【问题讨论】：

标签： d3.js safari color-space hsl

【解决方案1】：

看起来问题与字符串强制有关。基本上，让d3.hsl 返回颜色字符串（在您的情况下为"#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() 它，这就是它不起作用的原因。

【讨论】：