canvas画柱状图及createLinearGradient颜色渐变的效果

来源：互联网发布：电力数据库编辑：程序博客网时间：2024/05/16 08:56
引用参考代码
<!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 = [60,90,150,130,170,190,125,175,198,165,55,145];      //第一先定义一个画线的函数方法    画两条线      function line(aX,aY,bX,bY) {//开始和结束的横坐标  开始和结束的纵坐标          mycanvas.beginPath();          mycanvas.moveTo(aX,aY);          mycanvas.lineTo(bX,bY);          mycanvas.stroke();    }      line(300,80,300,480);      line(900,80,900,480);      //第二用for循环 画11条线   利用上面line的画线方法      for(var i=0;i<11;i++){          //300,80,900,80          //300,120,900,120          line(300,80+i*40,900,80+i*40);        write(200-i*20,270,80+i*40);    }     //第三定义一个矩形的函数方法      function rect(X,Y,width,height) {          mycanvas.beginPath();        mycanvas.rect(X,Y,width,height);        //根据柱状图数据分布显示不同的颜色判断            if(height>180*2){                //大于180显示颜色                colorB(X,Y,'#F1FD04','#FC0F06');            }else if(height>140*2){                //大于140显示颜色                colorB(X,Y,'#06FCBB','#3AFC06');            }else if(height>80*2){                //大于80显示颜色                colorB(X,Y,'#06C0FC','#060AFC');            }else{                //低于80显示颜色                colorB(X,Y,'#FC06F5','#FC0606');            }        mycanvas.fill();        mycanvas.closePath();    };    //封装颜色渐变方法    function colorB(X,Y,mycolor,hecolor){        //*****从X Y点开始 到X 480结束        var linearGradient=mycanvas.createLinearGradient(X,Y,X,480);             linearGradient.addColorStop(0,mycolor);             linearGradient.addColorStop(1,hecolor);            mycanvas.fillStyle=linearGradient;    };    //第四定义一个方法  定义矩形的具体变量以及高引入数组      function wenrect() {          for(var i=0;i<12;i++){              var width=30;              var height=arr[i]*2;              var X=310+i*40+i*10;              var Y=480-height;              rect(X,Y,width,height);            write((i+1)+"月",315+i*40+i*10,500)          }      }    wenrect();    //添加字      function write(start,ox,oy) {          mycanvas.beginPath();          mycanvas.fillStyle = "black";          mycanvas.fillText(start,ox,oy);          mycanvas.closePath();      }</script></html>
效果图：
这里写图片描述
阅读全文
2 0