logo标签列表

画布动态填充样式HSL颜色无法工作？

javascriptcanvas
4

我需要使用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);
}());

没有显示任何错误，但是没有返回任何内容。
1个回答
20

错别字！

// not 500%
c.fillStyle = 'hsl('+ 360*Math.random() +',100%,50%)';
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接