2015-05-28 27 views
2

我必须使用动态颜色通过使用hsl但它不工作。这里是我的代码画布动态fillStyle hsl颜色不起作用?

HTML:

<html> 
<head > 
    <script type="text/javascript" src="canvases.js"></script> 
</head> 
<body> 
    <canvas height="800" width="800"></canvas> 
</body> 
</html> 

的JavaScript:

(function(){ 

    function init(){ 
     var canvas = document.getElementsByTagName('canvas')[0]; 
     var c = canvas.getContext('2d'); 
     var x = 100; 
     var y = 100; 
     function draw(){ 
      c.clearRect(0,0,canvas.width, canvas.height); 
      c.fillStyle = 'black'; 
      c.clearRect(0,0,canvas.width, canvas.height); 

      for(var i=0; i<5; i++){ 
       var r= 50*Math.random(); 
       c.fillStyle = 'hsl('+ 360*Math.random() +',100%,500%)'; 
       c.beginPath(); 
       c.arc(1000*Math.random(),1000*Math.random(),r,0,2*Math.PI,false); 
       c.fill(); 
      } 
      requestAnimationFrame(draw); 

     } 
     draw(); 

    } 

    window.addEventListener('load',init,false); 
}()); 

不显示任何错误,但不能返回任何东西。

回答

8

错字!

// not 500% 
c.fillStyle = 'hsl('+ 360*Math.random() +',100%,50%)';