zdog.js学习记录
司马自明
1、作用
二维实现扁平化酷炫3D效果。
2、简单使用
很简单，看官网就行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
// create illo
let illo = new Zdog.Illustration({
// set canvas with selector
element: '.zdog-canvas',
});
// add circle
new Zdog.Ellipse({
addTo: illo,
diameter: 80,
stroke: 20,
color: '#636',
translate:{z:40}
});
// square
new Zdog.Rect({
addTo: illo,
width: 80,
height: 80,
// position further back
translate: { z: -40 },
stroke: 12,
color: '#E62',
fill: true,
});
// update & render
illo.updateRenderGraph();
function animate() {
// rotate illo each frame
illo.rotate.y += 0.03;
illo.updateRenderGraph();
// animate next frame
requestAnimationFrame( animate );
}
// start animation
animate();
</script>
</body>
</html>
类似资料：