zdog实现可拖拽三维旋转的卡通人物精灵面对面效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：zdog实现可拖拽三维旋转的卡通人物精灵面对面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
html {
	height:100%
}
body {
	min-height:100%;
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#435;
	color:white;
	font-family:sans-serif;
	text-align:center
}
canvas {
	display:block;
	margin:0 auto;
	cursor:move
}

</style>
</head>

<body>

    <div class="container"><canvas class="illo"></canvas>
        <p>拖拽旋转</p>
    </div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
    <script>
  

var BokehShape = Zdog.Shape.subclass({
    bokehSize: 5,
    bokehLimit: 64,
});
BokehShape.prototype.updateBokeh = function() {
    this.bokeh = Math.abs(this.sortValue) / this.bokehLimit;
    this.bokeh = Math.max(0, Math.min(1, this.bokeh));
    return this.bokeh
};
BokehShape.prototype.getLineWidth = function() {
    return this.stroke + this.bokehSize * this.bokeh * this.bokeh
};
BokehShape.prototype.getBokehAlpha = function() {
    var a = 1 - this.bokeh;
    a *= a;
    return a * 0.8 + 0.2
};
BokehShape.prototype.renderCanvasDot = function(a) {
    this.updateBokeh();
    a.globalAlpha = this.getBokehAlpha();
    Zdog.Shape.prototype.renderCanvasDot.apply(this, arguments);
    a.globalAlpha = 1
};
BokehShape.prototype.renderPath = function(a, b) {
    this.updateBokeh();
    if (b.isCanvas) {
        a.globalAlpha = this.getBokehAlpha()
    }
    Zdog.Shape.prototype.renderPath.apply(this, arguments);
    if (b.isCanvas) {
        a.globalAlpha = 1
    }
};
var TAU = Zdog.TAU;

function makeMadeline(g, c, i) {
    var j = new Zdog.Anchor(i);
    var b = new Zdog.Group({
        addTo: j,
        rotate: {
            x: -TAU / 8
        },
        translate: {
            z: -48
        },
        updateSort: true,
    });
    var f = new Zdog.Anchor({
        addTo: b,
        translate: {
            y: -11,
            z: -2
        },
        rotate: {
            x: TAU / 8
        },
    });
    var e = new Zdog.Ellipse({
        diameter: 6,
        addTo: f,
        translate: {
            z: 4
        },
        stroke: 8,
        color: c.skin,
    });
    var d = new Zdog.Group({
        addTo: e,
        translate: {
            z: e.stroke / 2 - 0.5
        },
    });
    [-1, 1].forEach(function(n) {
        if (g) {
            new Zdog.Ellipse({
                width: 2,
                height: 1.3,
                addTo: d,
                translate: {
                    x: 4.5 * n,
                    y: 3,
                    z: -1
                },
                rotate: {
                    y: -TAU / 16 * n
                },
                stroke: 1,
                color: "#FA8",
                fill: true,
            })
        }
        var m = 3.5 * n;
        new Zdog.Ellipse({
            width: 0.75,
            height: 1.5,
            addTo: d,
            color: c.eye,
            translate: {
                x: m
            },
            stroke: 2,
            fill: true,
        });
        new Zdog.Ellipse({
            addTo: d,
            height: 3,
            width: 1.2,
            quarters: 2,
            translate: {
                x: m,
                y: -3
            },
            rotate: {
                z: -TAU / 4 + 0.15 * n * (g ? 1 : -1)
            },
            color: c.hair,
            stroke: 1,
            fill: false,
            closed: true,
        })
    });
    new Zdog.Shape({
        path: [{
            x: -1
        }, {
            x: 1
        }, {
            z: -4
        }, ],
        addTo: f,
        translate: {
            y: -4,
            z: -1
        },
        stroke: 18,
        color: c.hair,
    });
    var a = new Zdog.Shape({
        path: [{}, {
            arc: [{
                z: 4,
                y: 4
            }, {
                z: 0,
                y: 8
            }, ]
        }, ],
        addTo: f,
        translate: {
            x: 2,
            y: -7.5,
            z: 6
        },
        rotate: {
            x: 0.5,
            z: -0.5
        },
        stroke: 4,
        color: c.hair,
        closed: false,
    });
    a.copy({
        translate: {
            x: 5,
            y: -6,
            z: 5
        },
        rotate: {
            x: -0.3,
            z: -0.5
        },
    });
    a.copy({
        translate: {
            x: 5,
            y: -6,
            z: 3
        },
        rotate: {
            y: -0.7,
            z: -1
        },
    });
    a.copy({
        translate: {
            x: -2,
            y: -7.5,
            z: 6
        },
        rotate: {
            x: 0,
            z: TAU / 16 * 6
        },
    });
    a.copy({
        translate: {
            x: -5,
            y: -6,
            z: 5
        },
        rotate: {
            x: 0,
            z: TAU / 4
        },
    });
    a.copy({
        translate: {
            x: -5,
            y: -6,
            z: 3
        },
        rotate: {
            y: 0.7,
            z: 1
        },
    });
    new Zdog.Shape({
        path: [{
            x: -3
        }, {
            x: 3
        }, ],
        addTo: f,
        stroke: 7,
        translate: {
            y: -8,
            z: 5
        },
        color: c.hair,
    });
    var l = new Zdog.Shape({
        path: [{
            y: -4,
            z: 0
        }, {
            bezier: [{
                y: -10,
                z: -14
            }, {
                y: 0,
                z: -16
            }, {
                y: 0,
                z: -26
            }]
        }, ],
        addTo: f,
        translate: {
            z: -4,
            y: 0
        },
        stroke: 10,
        color: c.hair,
        closed: false,
    });
    l.copy({
        translate: {
            x: -3,
            z: -4
        },
        rotate: {
            z: -TAU / 8
        },
        stroke: 8,
    });
    l.copy({
        translate: {
            x: 3,
            z: -4
        },
        rotate: {
            z: TAU / 8
        },
        stroke: 8,
    });
    l.copy({
        translate: {
            y: 2
        },
        scale: {
            y: 0.5
        },
        stroke: 8,
    });
    var k = new Zdog.Ellipse({
        width: 12,
        height: 10,
        addTo: b,
        rotate: {
            x: -TAU / 4
        },
        translate: {
            y: -1
        },
        stroke: 6,
        color: c.parkaLight,
        fill: true,
    });
    k.copy({
        width: 6,
        height: 6,
        translate: {
            y: -5
        },
    });
    k.copy({
        translate: {
            y: 3
        },
    });
    k.copy({
        translate: {
            y: 7
        },
        color: c.parkaDark,
    });
    new Zdog.Ellipse({
        width: 10,
        height: 8,
        addTo: b,
        rotate: {
            x: -TAU / 4
        },
        translate: {
            y: 11
        },
        stroke: 4,
        color: c.tight,
        fill: true,
    });
    [-1, 1].forEach(function(t) {
        var o = t == 1;
        new Zdog.Shape({
            addTo: b,
            stroke: 6,
            translate: {
                x: 6 * t,
                y: -5,
                z: -1
            },
            color: c.parkaLight,
        });
        var r = new Zdog.Anchor({
            addTo: b,
            translate: {
                x: 9 * t,
                y: -3,
                z: -2
            },
            rotate: o ? {
                x: TAU / 8 * 3,
                z: -TAU / 32
            } : {
                z: TAU / 16 * 2,
                x: -TAU / 16 * 2
            },
        });
        var m = new Zdog.Ellipse({
            diameter: 2,
            rotate: {
                x: -TAU / 4
            },
            addTo: r,
            translate: {
                x: 0 * t
            },
            stroke: 6,
            color: c.parkaLight,
            fill: true,
        });
        m.copy({
            translate: {
                y: 4
            },
        });
        var n = new Zdog.Anchor({
            addTo: r,
            translate: {
                y: 8
            },
            rotate: o ? {} : {
                z: TAU / 8
            },
        });
        m.copy({
            addTo: n,
            translate: {
                x: 0,
                y: 0
            },
        });
        m.copy({
            addTo: n,
            translate: {
                y: 4
 .........完整代码请登录后点击上方下载按钮下载查看