vue+canvas如何實現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果

更新時間：2024年09月06日 08:54:56 作者：言不及行yyds

這篇文章主要介紹了vue+canvas如何實現(xiàn)根據(jù)數(shù)據(jù)展示不同高度,不同漸變顏色的長方體效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

不一樣的長方體

1. 實現(xiàn)效果預(yù)覽

俗話說的好，沒有實現(xiàn)不了的頁面效果，只有禁錮的思想，

這不ui又給整了個新奇的頁面效果，

2.實現(xiàn)思路

2.1效果難點

根據(jù)不同的數(shù)據(jù)展示不同的顏色，而且需要漸變并有塊狀效果。
繪制多個單獨的區(qū)域

2.2 實現(xiàn)思路

3.實現(xiàn)

3.1 測試數(shù)據(jù)編寫

testData1:[
{ name:“庫房1”, now:888, extends:1800 },
{ name:“庫房2”, now:988, extends:1700 },
{ name:“庫房3”, now:488, extends:2200 },
{ name:“庫房4”, now:1888, extends:800 },
{ name:“庫房5”, now:1088, extends:1600 },
{ name:“庫房6”, now:1388, extends:1300 },
{ name:“庫房7”, now:288, extends:2400 },
{ name:“庫房8”, now:888, extends:1800 },
{ name:“庫房9”, now:888, extends:1800 },
{ name:“庫房10”, now:1888, extends:800 },
{ name:“庫房11”, now:1288, extends:1400 },
{ name:“庫房12”, now:1488, extends:1200 },
{ name:“庫房13”, now:1888, extends:800 },
{ name:“庫房14”, now:188, extends:2500 },
{ name:“庫房2”, now:988, extends:1700 },
{ name:“庫房3”, now:488, extends:2200 },
{ name:“庫房4”, now:1888, extends:800 },
{ name:“庫房5”, now:1088, extends:1600 },
{ name:“庫房13”, now:1888, extends:800 },
{ name:“庫房14”, now:188, extends:2500 },
{ name:“庫房3”, now:488, extends:2200 },
{ name:“庫房4”, now:1888, extends:800 },
{ name:“庫房5”, now:1088, extends:1600 },
],

3.2 編寫canvas繪制函數(shù)

js部分

draw(i,item){
      canvas = document.getElementById(`myCanvas${i}`);
      const ctx = canvas.getContext('2d');
      
     // 定義矩形塊的寬度和高度
 	const rectWidth = canvas.width;
    const rectHeight = canvas.height/8;

    // 定義矩形塊之間的間距
    const rectSpacing = 0.25 ;

    // 定義要繪制的行數(shù)和列數(shù)
    //其中2688代表測試數(shù)據(jù)中的now+extends的總和，
    //可根據(jù)具體情況自己調(diào)整
     const numRows = Math.ceil(item.now*10/2688);
     const numCols = 1;

     let color=[]
     if(Math.ceil(item.now*10/2688) >= 7){
           color[0]='#EE5E5D'
           color[1]='#FFECEC'
      }else if(Math.ceil(item.now*10/2688) >= 4){
           color[0]='#EEA750'
           color[1]='#FFF0DD'
      }else{
           color[0]='#4BCBA6'
           color[1]='#9EFAE0'
       }
     // 繪制矩形塊
     for (let row = 0; row < numRows; row++) {
          for (let col = 0; col < numCols; col++) {
                const x = col * (rectWidth + rectSpacing);
                const y = row * (rectHeight + rectSpacing);
                // 設(shè)置矩形塊的顏色
                const grd = ctx.createLinearGradient(canvas.width/2, 0,canvas.width/2,canvas.height);
                grd.addColorStop(0, color[1]);
                grd.addColorStop(1,color[0]);
                // 用漸變填充
                ctx.fillStyle = grd;
				// 繪制矩形塊
                ctx.fillRect(x, y, rectWidth, rectHeight);
                }
            }
        }

html部分

 <ul>
     <li v-for="item,index in testData1" :key="index">
         <p class="title">{{item.now}}/{{item.extends}}m3</p>
         <div class="show">
             <canvas :id="`myCanvas${index}`" class="canvas"></canvas>
         </div>
          <p class="storeName">{{item.name}}</p>
     </li>
 </ul>

scss部分

container{
    width:100%;
    height:100%;
    position:relative;
        ul{
            display:grid;
            margin-top:20px;
            margin-left:10px;
            width:97%;
            grid-template-columns: repeat(10,1fr);
            gap:10px;
            font-family: Source Han Sans-Regular, Source Han Sans;
            li{
                width:100%;
                aspect-ratio: 1 / 1.5;
                background: #FFFFFF;
                box-shadow: 0px 8px 14px 0px rgba(48,78,121,0.5);
                border-radius: 4px;
                position:relative;
                text-align: center;
                .title{
                    font-size: 14px;
                    font-weight: 400;
                    color: #929292;
                    margin-top:14px;
                }
                .show{
                   width:33%;
                   height:70%;
                   background: #EFF2F7;
                   margin:10px auto;
                   border-radius: 4px;
                   .canvas{
                        width:100%;
                        height:100%;
                        transform: rotate(180deg);
                   }
                }
            }
        }
}