今日在做实训任务的时候要求使用canvas来实现某地一到十二月份的降水量与蒸发量的柱状图,找了很多资料也没有找到自己想要的,后来终于功夫不负有心人找到了一个可以看懂的Demo,改了改终于实现了要求的结果
样图:
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
</body>
<script>
var ocanvas = document.getElementById("canvas");
var mycanvas = ocanvas.getContext("2d");
var arr = [
{number1:2,number2:2.6},
{number1:4.9, number2:5.9},
{number1:7, number2:9},
{number1:23.2, number2:26.4},
{ number1:25.6, number2:28.7},
{ number1:70.7,number2:76.7},
{ number1:135.6,nu