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>