canvas——矩形的绘制——柱状图的制作

最新推荐文章于 2023-12-27 00:25:20 发布

ca11meback

最新推荐文章于 2023-12-27 00:25:20 发布

阅读量207

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_53596260/article/details/125958166

版权

（1）rect()：在当前子路经添加一条弧线；

语法：context.rect(x,y,width,height);

四个参数：起点坐标x,y：左上角坐标；宽度width：矩形的宽度；高度height：矩形的高度；

（2）strokeRect()方法可以直接绘制一个矩形；

语法：context.strokeRect(x,y,width,height);

柱形图算是一个比较简单的图形了

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        border: 1px black solid;
    }
</style>

<body>
    <canvas id="box" height="700" width="700"> </canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d")
        var arr=[354,644,231,452,279]
        ctx.lineTo(100,600)
        ctx.lineTo(600,600)
        ctx.stroke()
        let lim=500/Math.max(...arr)
        console.log(lim)
        for(i=0;i<arr.length;i++){
            ctx.beginPath()
            console.log(arr[i])
            ctx.fillStyle="gold"
            ctx.fillRect(100+i*70,600-lim*arr[i],50,lim*arr[i])
        }
    </script>
</body>

</html>

设计思路：假如数组里面就是我们所需要的数据，我们首先要做的就是画一个横轴，来使得我们的柱形图都在横轴上显示，然后设置一个最大值，来保证数组里的数组的高度不能够超过这个最大值，即使超过了也只能有这么多，然后就可以进入for循环去写我们的每个柱形，fillrect（）使用颜色去填充这个柱形，他里面的四个参数和strokerect（）一样分别是，x，y，柱形的长，柱形的宽，这里的x的值起始就是我们横轴的起始位置，然后加上i*间距，（要注意的是这个间距一定要大于柱形的长，不然就会使得柱形之间重叠），y的值就是横轴y的值减去数组[i]的值*限制高度，因为这个y的值保证要在横轴上，然后写柱形的长，柱形的高度就等于数组[i]的值*限制高度