canvas绘制立方体盒子

基于canvas绘制立方体

length: 长
width: 宽
height: 高
id: canvas元素id
color: 盒子颜色

// 基于canvas生成立方体
export function generateCubeByCanvas(length = 0, width = 0, height = 0, id = '', color) {
   
    const canvas = document.getElementById(id)
    const ctx = canvas.getContext('2d')
    const scale = Math.ceil(Math.max(length, width, height) / 100 / 2.2 * 10) // 缩放比例，太大绘图会显示不下
    const x = length / scale
    const y = height / scale // 宽高互换是为了有跟集装箱上绘制的图形更接近
    const z = width / scale // 宽高互换是为了有跟集装箱上绘制的图形更接近
    const points = [
        [0, 0],
        [x, 0],
        [x, -y],
        [0, -y],
        [z * Math.cos(45 * Math.PI / 180), -z * Math.sin(45 * Math.PI / 180