canvas制作条形统计图

最新推荐文章于 2022-05-04 20:42:08 发布

原创最新推荐文章于 2022-05-04 20:42:08 发布 · 893 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

canvas 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何利用HTML5的canvas元素结合JavaScript，创建动态的条形统计图。通过canvas API，我们可以自定义颜色、标签和数据，实现交互式的数据可视化效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机统计图</title>
    <style>
        #root{
            display: block;
            margin: 100px auto;
            /* border: 1px solid #ccc; */
        }
    </style>
</head>
<body>
    <canvas id="root" width="600px" height="500px">111</canvas>
    <script>
        let container = document.querySelector('#root');
        let ctx = container.getContext("2d");
        // 坐标系
        ctx.beginPath();
        ctx.moveTo(100,100); 
        ctx.lineTo(100,400); //y轴
        ctx.lineTo(500,400); //x轴
        ctx.stroke(); //着色
        ctx.closePath();
        //画条形图
        for(let i=0;i<6;i++){
            let height = Math.random()*290 +10 //[10,300),随机高度
            ctx.fillStyle = '#' + parseInt(Math.random()*0xFFFFFe).toString(16); //随机色
            // ctx.fillRect(x起始位置,y起始位置,条形宽,条形高)
            ctx.fillRect(140+i*60,400-height,20,height);
        }
    </script>
</body>
</html>