当前位置：网站首页>Canvas -- drawing of rectangle -- making of histogram

Canvas -- drawing of rectangle -- making of histogram

2022-07-26 03:10:00 【ca11meback】

（1）rect()： Add an arc to the current path ;

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

Four parameters ： Starting point coordinates x,y： Top left coordinates ; Width width： The width of the rectangle ; Height height： The height of the rectangle ;

（2）strokeRect() Method can draw a rectangle directly ;

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

The column chart is a relatively simple figure 

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

Design thinking ： If the data we need is in the array , The first thing we need to do is draw a horizontal axis , To make our bar graphs display on the horizontal axis , Then set a maximum value , To ensure that the height of the array in the array cannot exceed this maximum , Even if it exceeds, there can only be so many , Then you can enter for Cycle through each of our columns ,fillrect（） Use color to fill this column , The four parameters in it and strokerect（） The same difference is ,x,y, Cylindrical length , The width of the column , there x The starting value of is the starting position of our horizontal axis , And then add i* spacing ,（ It should be noted that this spacing must be greater than the length of the column , Otherwise, the columns will overlap ）,y The value of is the horizontal axis y Subtract the array from the value of [i] Value * Height Limited , Because of this y The value of is guaranteed to be on the horizontal axis , Then write the length of the column , The height of the column is equal to the array [i] Value * Height Limited

原网站

版权声明
本文为[ca11meback]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207260306221602.html

边栏推荐

猜你喜欢

随机推荐