canvas_02 条形统计图

2021-12-26 20:02:08 阅读：139 来源： 互联网

标签：02 canvas 统计图 ctx height 400 var 100

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8         <title>Canvas</title>
 9         <style>
10             canvas {
11                 margin: 0 auto;
12                 border: 1px solid #aaa;
13                 display: block;
14             }
15         </style>
16     </head>
17 
18     <body>
19         <canvas width="500px" height="500px" id="canvas"></canvas>
20 
21         <script>
22             var canvas = document.querySelector("#canvas");
23             var ctx = canvas.getContext("2d");
24 
25             function drawCoordinate() {
26                 ctx.beginPath();
27                 ctx.moveTo(100, 100);
28                 ctx.lineTo(100, 400);
29                 ctx.lineTo(400, 400);
30                 ctx.stroke();
31                 ctx.closePath();
32             }
33 
34             function drawChart() {
35                 for (var i = 0; i < 5; i++) {
36                     // [10, 290)
37                     var height = Math.random() * 280 + 10;
38                     ctx.fillStyle = "#" + parseInt(Math.random() * 0xffffff).toString(16);
39                     ctx.fillRect(120 + i * 40, 400 - height, 20, height);
40                 }
41             }
42 
43             // step_01 画坐标图
44             drawCoordinate();
45             // step_02 条形统计图
46             drawChart();
47         </script>
48     </body>
49 
50 </html>

标签：02,canvas,统计图,ctx,height,400,var,100
来源： https://www.cnblogs.com/luwei0915/p/15733848.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas_02 条形统计图