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

看起来这个问题与String强制有关。基本上，让d3.hsl返回颜色字符串（"#40bf40"的正确方法）的正确方法是在HSL对象上调用.toString()（参见here）。所以在你的情况下，它将是

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

将修复Safari问题。

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

在Safari上d3.hsl失败

1 个答案: