canvas-study
/
canvas-cube.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Canvas绘制立方体</title>
        <style>* {margin: 0; padding: 0; box-sizing: border-box; } canvas { margin: 20px; border: 1px solid #ccc }</style>
    </head>
    <body>
        <canvas id="canvas" width="600px" height="400px"></canvas>
        <script type="text/javascript">
            /**
             * @type {HTMLCanvasElement}
             */
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                x = 100, // 长宽高
                y = 100,
                z = 100;

            // 旋转 45度 时，对应 x、y 的投影
            var projectionX = z * Math.cos((45 * Math.PI) / 180);
            var projectionY = z * Math.sign((45 * Math.PI) / 180);

            // 八个顶点
            var points = [
                [0, 0],
                [x, 0],
                [x, -y],
                [0, -y],
                [projection, -projectionY],
                [projection, -y - projectionY],
                [x + projection, -projectionY],
                [x + projection, -y - projectionY],
            ];

            // 六个面
            var faces = [
                [points[4], points[5], points[7], points[6]], //后
                [points[0], points[4], points[6], points[1]], //下
                [points[0], points[3], points[5], points[4]], //左
                [points[1], points[2], points[7], points[6]], //右
                [points[2], points[3], points[5], points[7]], //上
                [points[0], points[3], points[2], points[1]], //前
            ];

            // 画左边立方体
            draw(0 + 50, 300);
            // 画右边立方体
            draw(300 + 50, 300, true);

            /**
             * 绘制立方体
             * @param x {number} 起始 x
             * @param y {number} 起始 y
             * @param fill {boolean} 是否实心填充
             * @return void
             */
            function draw(x, y, fill) {
                // 把当前状态推入到绘图堆栈中，下文的 restore 恢复到这行代码之前的状态
                ctx.save();
                ctx.translate(x, y);

                // 绘制六个面
                for (var i = 0, len = faces.length; i < len; i++) {

                    var p = faces[i];
                    // 开始子路径的一个新的集合，context中止当前的路径，立刻把当前的坐标设置为起点(0,0)，开始一条新的路径
                    ctx.beginPath();

                    // 画一个正方形，或者菱形
                    ctx.moveTo(p[0][0], p[0][1]);
                    for (var j = 1, l = p.length; j < l; j++) {
                        ctx.lineTo(p[j][0], p[j][1]);
                    }
                    // closePath的意思是关闭路径，不是结束路径，它只是将路径的终点与起点相连，不是开始一个新路径。
                    // 不要试图通过闭合一段路径来开始新的路径，而且如果你不闭合路径，即使开始新的路径，其也不会闭合。
                    ctx.closePath();

                    if (fill) { // 填充色
                        ctx.fillStyle = 'rgb(' + randColor() + ',' + randColor() + ',' + randColor() + ')';
                        ctx.fill();
                    } else {
                        ctx.stroke();
                    }
                }

                // 从栈中弹出存储的图形状态并恢复 CanvasRenderingContext2D 对象的属性、剪切路径和变换矩阵的值。
                // 恢复到 save 之前的样子
                ctx.restore();

                // 绘制八个顶点
                for (let i = 0; i < points.length; i++) {
                    // 写一个字母
                    ctx.font = '10px Georgia';
                    ctx.fillStyle = '#f00';
                    ctx.fillText('p' + i + ' (' + formatDigital(points[i][0]) + ', ' + formatDigital(points[i][1]) + ')', x + points[i][0] - 10, y + points[i][1] - 5);
                }
            }

            /**
             * 数字格式化
             * @param n {number}
             */
            function formatDigital(n) {
                return n.toFixed(2).replace(/\.?0+$/, '');
            }

            /**
             * 随机颜色
             */
            function randColor() {
                return ~~(Math.random() * 255);
            }
        </script>
    </body>
</html>