用canvas开发简易版的随机柱状统计图

最新推荐文章于 2025-12-23 22:02:32 发布

原创最新推荐文章于 2025-12-23 22:02:32 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

这篇博客通过HTML5的Canvas API展示了如何绘制坐标轴并生成随机颜色的柱状图。代码详细解释了从创建路径到填充颜色的每个步骤，适合前端开发者学习Canvas图形绘制。

<canvas id="cv" width="400" height="400"/>

<script>
    let cv = document.querySelectorAll('#cv')[0]
    //获取画布元素

    let ctx = cv.getContext('2d')
    //获取画布元素操作权限

   //绘制坐标轴

    ctx.beginPath()
    //创建开始路径

    ctx.moveTo(100,100)
    ctx.lineTo(100,300)
    //绘制y轴

    ctx.lineTo(300,300)
    //绘制x轴

    ctx.strokeStyle = 'black'
    //绘制坐标线样式

   ctx.lineWidth = 1
    //绘制坐标轴粗细

    ctx.stroke()
    //给坐标轴着色

    ctx.closePath()
    //关闭路径


    //绘制柱状图
    for(let i = 1;i <= 6;i++){
        let height = Math.random()*180+10
        //绘制柱状图的高
        
        let color = '#'+parseInt(Math.random()*0xffffff).toString(16)
        //绘制柱状图填充颜色

        ctx.fillStyle = color
        //给柱状图着色

        ctx.fillRect(120+i*20,300-height,10,height)
        //绘制柱状图
    }
</script>

运行效果如下图：