SOURCE

// 创建一个画布
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 设置画布的宽度和高度
canvas.width = 600;
canvas.height = 600;

// 定义Vue.js徽标的颜色和尺寸
var color = "#42b983"; // 绿色
var size = 100; // 徽标的边长

// 定义3D效果的参数
var depth = 20; // 深度
var angle = Math.PI / 6; // 角度

// 计算3D效果的偏移量
var offsetX = Math.cos(angle) * depth;
var offsetY = Math.sin(angle) * depth;

// 绘制徽标的正面
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(150, 50); // 移动到左上角顶点
ctx.lineTo(250, 150); // 绘制到右上角顶点
ctx.lineTo(150, 250); // 绘制到右下角顶点
ctx.lineTo(50, 150); // 绘制到左下角顶点
ctx.closePath();
ctx.fill();

// 绘制徽标的右侧面
ctx.fillStyle = shadeColor(color, -20); // 使用比正面颜色稍暗的颜色填充
ctx.beginPath();
ctx.moveTo(250, 150); // 移动到右上角顶点
ctx.lineTo(250 + offsetX, 150 - offsetY); // 绘制到右上角顶点的偏移位置
ctx.lineTo(150 + offsetX, 250 - offsetY); // 绘制到右下角顶点的偏移位置
ctx.lineTo(150, 250); // 绘制到右下角顶点
ctx.closePath();
ctx.fill();

// 绘制徽标的底部面
ctx.fillStyle = shadeColor(color, -40); // 使用比正面颜色更暗的颜色填充
ctx.beginPath();
ctx.moveTo(150, 250); // 移动到右下角顶点
ctx.lineTo(150 + offsetX, 250 - offsetY); // 绘制到右下角顶点的偏移位置
ctx.lineTo(50 + offsetX, 150 - offsetY); // 绘制到左下角顶点的偏移位置 
ctx.lineTo(50, 150); // 绘制到左下角顶点 
ctx.closePath();
ctx.fill();

// 定义一个函数，用于调整颜色的亮度（参考：https://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors）
function shadeColor(color, percent) {
    var R = parseInt(color.substring(1,3),16);
    var G = parseInt(color.substring(3,5),16);
    var B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;  
    G = (G<255)?G:255;  
    B = (B<255)?B:255;  

    var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}

<canvas id="canvas" width="600" height="600" style="width:600px; height:600px;"></canvas>