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

最新推荐文章于 2025-05-13 06:57:14 发布

置顶青珣墨笠

最新推荐文章于 2025-05-13 06:57:14 发布

阅读量2.1k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： web前端小项目 web前端javascript 文章标签： canvas 颜色渐变

本文链接：https://blog.youkuaiyun.com/zhangli2513/article/details/77097766

web前端javascript 同时被 2 个专栏收录

22 篇文章

订阅专栏

web前端小项目

12 篇文章

订阅专栏

本文介绍了如何利用HTML5的canvas元素来创建柱状图，并实现颜色的线性渐变效果。通过示例代码展示了具体的实现过程，帮助读者理解canvas绘图和颜色渐变的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引用参考代码

<!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>

效果图：
这里写图片描述