d3.hsl терпит неудачу на сафари

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, чтобы вернуть строку цвета ("#40bf40" в вашем случае), - это позвонить .toString() на объект HSL (см. here). Таким образом, в вашем случае это будет

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

, который исправит проблему Safari.

Причина, по которой она работала в Chrome без .toString(), заключается в том, что JS-движок Chrome решил преобразовать его в строку для вас - так же, как JS преобразует число в строку примерно так: 5 + "2" // "52". Внутренне это на самом деле звонит (5).toString() + "2". Сафари не решалось до .toString(), поэтому он не сработал.