canvas制作条形统计图

最新推荐文章于 2023-11-05 00:15:00 发布

默根

最新推荐文章于 2023-11-05 00:15:00 发布

阅读量793

点赞数

分类专栏： canvas 文章标签： css html

本文链接：https://blog.csdn.net/mo_gen/article/details/121958436

版权

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

摘要由CSDN通过智能技术生成

<!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(); //着色
        c