h5-随机画圆（随机颜色、随机大小）

最新推荐文章于 2024-01-26 14:14:20 发布

原创最新推荐文章于 2024-01-26 14:14:20 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #开发语言 #javascript

本文介绍了一种使用JavaScript和Canvas API创建随机图形的方法。通过Math.random()生成随机数，实现图形位置、大小及颜色的随机化，并调整透明度，使得每个图形都独一无二。

效果：
在这里插入图片描述
代码

    for(var i=0;i<50;i++){
        ctx.beginPath();
        ctx.arc(Math.random()*400,Math.random()*400,Math.random()*50,0,Math.PI*2);
        //设置透明度
        ctx.globalAlpha = Math.random()*0.2;
        //随机生成颜色
        ctx.fillStyle="rgba("+Math.random()*255+","
            +Math.random()*255+","+Math.random()*255;
        ctx.fill();
        ctx.stroke();
    }