canvas 随机生成彩色柱状图

最新推荐文章于 2023-04-27 14:35:47 发布

企鹅-Penguin

最新推荐文章于 2023-04-27 14:35:47 发布

阅读量288

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_66817262/article/details/124635226

Canvas 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍如何利用JavaScript的canvas API，结合CSS，动态地生成具有随机颜色的柱状图，适用于前端数据可视化展示。

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

柱状图、颜色，随机生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgba(149, 175, 192, 0.3);
        }

        .canvas {
            display: block;
            margin: 30px auto;
            border: 1px solid #cccccc;
            background-color: rgba(199, 236, 238, 0.5);
        }
    </style>
</head>

<body>
    <canvas class="canvas" width="700" height="700"></canvas>

    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(45, 60);
        ctx.lineTo(50, 50);
        ctx.lineTo(55, 60);
        ctx.lineTo(50, 50);
        ctx.lineTo(50, 450);
        ctx.lineTo(450, 450);
        ctx.lineTo(440, 445);
        ctx.lineTo(450, 450);
        ctx.lineTo(440, 455);
        ctx.strokeStyle = 'black';
        ctx.strokeWidth = 5;
        ctx.stroke();
        ctx.closePath();

        for (let i = 0; i < 9; i++) {
            let r = Math.random() * 256;
            let g = Math.random() * 256;
            let b = Math.random() * 256;
            ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
            let x = 70, y = 450, w = 20, h = -Math.random() * 400;
            ctx.fillRect(x + 40 * i, y, w, h);
        }
    </script>
</body>
</html>