用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>

运行效果如下图：