canvas 和 js实现矩形

最新推荐文章于 2024-06-02 00:26:11 发布

原创最新推荐文章于 2024-06-02 00:26:11 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #js

该博客主要介绍了使用CANVAS实现多个矩形的内容，涉及信息技术领域中前端图形绘制方面的知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CANVAS实现多个矩形，

<canvas id="circle" width="500" height="500" style="border:1px solid black;"></canvas>


function randomRect() {
        var c = document.getElementById('circle');
        var ctx = c.getContext('2d');
        for(var i=0; i<20; i++){
            var x = Math.floor(Math.random() * 100 + 50) ;
            var y = Math.floor(Math.random() * 100 + 40) ;
            var w = Math.floor(Math.random() * 100 + 200);
            var h = Math.floor(Math.random() * 100 + 300);
            ctx.fillStyle = randomColor();
            ctx.fillRect(x,y,w,h);
        }
}
//随机生成颜色函数
function randomColor(){
    var r = Math.floor(120 + Math.random()*255);
    var g = Math.floor(100 +Math.random()*255);
    var b = Math.floor(60 +Math.random()*255);
    return 'rgb('+ r + ',' + g + ',' + b +')';
}
randomRect();