Canvas实现柱状对比图

最新推荐文章于 2022-11-10 09:29:45 发布

myt_Never

最新推荐文章于 2022-11-10 09:29:45 发布

阅读量872

点赞数 2

分类专栏： Web前端文章标签： Canvas 柱状图

本文链接：https://blog.csdn.net/myt_never/article/details/80185666

版权

本文介绍如何利用HTML5的Canvas元素实现一到十二月份降水量与蒸发量的柱状对比图。通过实例代码展示具体实现过程。

摘要由CSDN通过智能技术生成

今日在做实训任务的时候要求使用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