canvas案例--根据生成对象时的参数生成对应高度方块并附有数值

Leoenchanted
71 阅读2分钟

先上图

1699447029577.png

要求

封装一个绘制长方体的类，存为一个js文件，要求根据生成对象时的参数生成对应高度，在顶部出现数值文本，在底部按顺序生成序号（自动生成），根据循环设置颜色、位置。

封装js类

因为不知道到底要写多少个立方体，所以这个长方体的类我用了rest参数，这个可以获取函数多余的参数

rest参数

形式：(...变量名) ,把一个分离的参数序列整合为一个数组，值是一个数组。

代码

function Rectangle(...num){
    for(let x = 0;x<num.length;x++){
        let div = document.createElement("div");
        div.id = "_"+x;
        div.setAttribute("style","float:left");
        document.body.appendChild(div);  //!!!!很重要，把div添加到body之中，不然只是创建了一个div元素却不能显示在页面上。
        let c = document.createElement("canvas");
        c.width=100;
        c.height=400;
        div.appendChild(c);
        let cxt = c.getContext("2d");
        cxt.translate(0,400);
        cxt.save();
        if((x+1)%4==0){
            cxt.fillStyle="rgb(118, 118, 118)";
        }else if((x+1)%3==0){
            cxt.fillStyle="rgb(252, 64, 177)";
        }else if((x+1)%2==0&&(x+1)%4!==0){
            cxt.fillStyle="rgb(38, 46, 115)";
        }else{
            cxt.fillStyle="rgb(83, 207, 235)";
        }
        
        cxt.beginPath();
        cxt.lineTo(50,-30);
        cxt.lineTo(50,-30-num[x]);
        cxt.lineTo(20,-45-num[x]);
        cxt.lineTo(20,-45);
        cxt.closePath();
        cxt.fill();
        cxt.restore();
        if((x+1)%4==0){
            cxt.fillStyle="rgb(157, 157, 157)";
        }else if((x+1)%3==0){
            cxt.fillStyle="rgb(253, 94, 197)";
        }else if((x+1)%2==0&&(x+1)%4!==0){
            cxt.fillStyle="rgb(68, 66, 135)";
        }else{
            cxt.fillStyle="rgb(113,227,240)"
        }
        
        cxt.beginPath();
        cxt.lineTo(50,-30);
        cxt.lineTo(50,-30-num[x]);
        cxt.lineTo(80,-45-num[x]);
        cxt.lineTo(80,-45);
        cxt.closePath();
        cxt.fill();
        cxt.restore();
        
        if((x+1)%4==0){
            cxt.fillStyle="rgb(197, 197, 197)";
        }else if((x+1)%3==0){
            cxt.fillStyle="rgb(255, 124, 227)";
        }else if((x+1)%2==0&&(x+1)%4!==0){
            cxt.fillStyle="rgb(99, 96, 155)";
        }else{
            cxt.fillStyle="rgb(143,247,245)"
        }
        
        cxt.beginPath();
        cxt.lineTo(50,-30-num[x]);
        cxt.lineTo(80,-45-num[x]);
        cxt.lineTo(50,-60-num[x]);
        cxt.lineTo(20,-45-num[x]);
        cxt.closePath();
        cxt.fill();

        let toptext = num[x]+" 000$";
        let bottomtext="0"+(x+1);
        cxt.restore();
        cxt.font="200 16px Poppin";
        if((x+1)%4==0){
            cxt.fillStyle="rgb(157, 157, 157)";
        }else if((x+1)%3==0){
            cxt.fillStyle="rgb(253, 94, 197)";
        }else if((x+1)%2==0&&(x+1)%4!==0){
            cxt.fillStyle="rgb(68, 66, 135)";
        }else{
            cxt.fillStyle="rgb(113,227,240)"
        }
        cxt.fillText(toptext,25,-70-num[x]);
        cxt.fillText(bottomtext,42,-10);             
        
    }
}

画长方体主要用canvas绘画了三个面从而所形成的伪立体形状。

剩下的代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
        margin-right:10px;
        margin-bottom:20px;	
        
        }
    </style>
</head>
<body>
    <script src="./index.js"></script>
    
    <script>
        Rectangle(30,110,80,20,40,120);   
    </script>
</body>
</html>
avatar
文章
阅读
粉丝