详解HTML5 Canvas绘制时指定颜色与透明度的方法

2020-04-21 07:13:45易采站长站整理

</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        context.globalAlpha = 0.5;   
  
        for(var i=0; i<=50; i++){   
            var R = Math.floor(Math.random() * 255);   
            var G = Math.floor(Math.random() * 255);   
            var B = Math.floor(Math.random() * 255);   
  
            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";   
  
            context.beginPath();   
            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   
            context.fill();   
        }   
    };   
</script>   
</body>   
</html>  

运行结果:
2016325112320763.jpg (850×500)

是不是非常的酷?终于有点艺术家的范儿了吧。