264 lines
5.0 KiB
HTML
264 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Logo - 全栈工程师俱乐部</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div style="border: 10px dotted #EEE; width:600px">
|
||
|
|
<h1>方案 1 </h1>
|
||
|
|
<canvas id="zdog1" width="500" height="500"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="border: 10px dotted #EEE; width:600px; background: #00b7ee">
|
||
|
|
<h1>方案 2 </h1>
|
||
|
|
<canvas id="zdog2" width="500" height="500"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="border: 10px dotted #EEE; width:600px">
|
||
|
|
<h1>方案 3 </h1>
|
||
|
|
<canvas id="zdog3" width="500" height="500"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<canvas id="zdog" width="500" height="500"></canvas>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--引入zdog文件-->
|
||
|
|
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
|
||
|
|
<script type="application/javascript">
|
||
|
|
|
||
|
|
|
||
|
|
class Yun extends Zdog.Shape {
|
||
|
|
constructor( options ){
|
||
|
|
|
||
|
|
options.path = [
|
||
|
|
{ x: -0.6 , y : -0.5 }, // start at 1st point
|
||
|
|
{ x: 0.6 , y : -0.5 }, // line to 2nd point
|
||
|
|
{ move: {x: -0.8 , y: 0} },
|
||
|
|
{ x: 0.8 , y: 0},
|
||
|
|
{ move: {x: 0, y: 0} },
|
||
|
|
{ x: -0.5, y: 0.7 },
|
||
|
|
{ x: 0.4, y: 0.6 },
|
||
|
|
{ move: {x: 0.4, y: 0.5} },
|
||
|
|
{ x: 0.6, y: 0.7 },
|
||
|
|
],
|
||
|
|
super(options);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
Zdog.Yun = Yun
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function () {
|
||
|
|
|
||
|
|
var sceneSize = 500;
|
||
|
|
var TAU = Zdog.TAU;
|
||
|
|
var ROOT2 = Math.sqrt(2);
|
||
|
|
var ROOT3 = Math.sqrt(3);
|
||
|
|
var ROOT5 = Math.sqrt(5);
|
||
|
|
var PHI = ( 1 + ROOT5 ) / 2;
|
||
|
|
|
||
|
|
// colors
|
||
|
|
var color = '#FA5';
|
||
|
|
|
||
|
|
var newcanvas = new Zdog.Illustration({
|
||
|
|
// 用id选择器设置画布
|
||
|
|
element: '#zdog1',
|
||
|
|
dragRotate: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
// var yun = new Zdog.Yun({
|
||
|
|
// addTo: newcanvas,
|
||
|
|
// stroke: 20,
|
||
|
|
// color: '#636',
|
||
|
|
// });
|
||
|
|
|
||
|
|
new Zdog.Yun({
|
||
|
|
addTo: newcanvas,
|
||
|
|
closed: false,
|
||
|
|
stroke: 20,
|
||
|
|
scale : 50,
|
||
|
|
color: '#636',
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
|
||
|
|
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
|
||
|
|
newcanvas.rotate.y += 0.01;
|
||
|
|
// newcanvas.rotate.x += 0.02;
|
||
|
|
newcanvas.updateRenderGraph();
|
||
|
|
// 动画下一帧继续执行函数
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
}
|
||
|
|
// 开始动画，执行函数
|
||
|
|
animate();
|
||
|
|
})()
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// 方案二
|
||
|
|
|
||
|
|
( function() {
|
||
|
|
var beigeDark = '#F96';
|
||
|
|
var beigeLight = '#FC9';
|
||
|
|
var skinDark = '#F66';
|
||
|
|
var skinMedium = '#F88';
|
||
|
|
var skinLight = '#FAA';
|
||
|
|
var navy = '#036';
|
||
|
|
var midnight = '#003';
|
||
|
|
var auburn = '#903';
|
||
|
|
var red = '#C33';
|
||
|
|
var sky = '#09D';
|
||
|
|
var offWhite = '#FFD';
|
||
|
|
var white = 'white';
|
||
|
|
var blueDark = '#66C';
|
||
|
|
var bluePale = '#CCF';
|
||
|
|
var TAU = Zdog.TAU;
|
||
|
|
var sceneStartRotation = { y: -TAU/8 };
|
||
|
|
var newcanvas = new Zdog.Illustration({
|
||
|
|
// 用id选择器设置画布
|
||
|
|
element: '#zdog2',
|
||
|
|
dragRotate: true,
|
||
|
|
});
|
||
|
|
|
||
|
|
// big puff
|
||
|
|
var cloud = new Zdog.Shape({
|
||
|
|
addTo: newcanvas,
|
||
|
|
translate: { x: 34, y: -26, z: -20 },
|
||
|
|
rotate: { y: -sceneStartRotation.y },
|
||
|
|
stroke: 16,
|
||
|
|
color: white,
|
||
|
|
// scale : 5,
|
||
|
|
});
|
||
|
|
|
||
|
|
// left small puff
|
||
|
|
var smallPuff = new Zdog.Shape({
|
||
|
|
addTo: cloud,
|
||
|
|
translate: { x: -9, y: 4, z: 4 },
|
||
|
|
stroke: 8,
|
||
|
|
color: white,
|
||
|
|
});
|
||
|
|
smallPuff.copy({
|
||
|
|
translate: { x: 9, y: 5, z: 6 },
|
||
|
|
stroke: 10,
|
||
|
|
});
|
||
|
|
|
||
|
|
var disk = new Zdog.RoundedRect({
|
||
|
|
addTo: cloud,
|
||
|
|
width: 26,
|
||
|
|
height: 12,
|
||
|
|
cornerRadius: 6,
|
||
|
|
translate: { x: -6, y: 7, z: 4 },
|
||
|
|
rotate: { x: TAU/4 },
|
||
|
|
stroke: 3,
|
||
|
|
color: white,
|
||
|
|
fill: true,
|
||
|
|
});
|
||
|
|
disk.copy({
|
||
|
|
translate: { x: 6, y: 9, z: 8 },
|
||
|
|
});
|
||
|
|
|
||
|
|
// sun
|
||
|
|
new Zdog.Shape({
|
||
|
|
addTo: cloud,
|
||
|
|
translate: { x: -13, y: 0, z: -14 },
|
||
|
|
stroke: 8,
|
||
|
|
color: beigeLight,
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
|
||
|
|
// 通过逐步增加xxx.rotate.y来改变场景的旋转。值越大越快。
|
||
|
|
newcanvas.rotate.y += 0.01;
|
||
|
|
// newcanvas.rotate.x += 0.02;
|
||
|
|
newcanvas.updateRenderGraph();
|
||
|
|
// 动画下一帧继续执行函数
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
}
|
||
|
|
// 开始动画，执行函数
|
||
|
|
animate();
|
||
|
|
|
||
|
|
})();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
|
||
|
|
// Made with Zdog
|
||
|
|
|
||
|
|
const TAU = Zdog.TAU;
|
||
|
|
let isSpinning = true;
|
||
|
|
|
||
|
|
let illo = new Zdog.Illustration({
|
||
|
|
element: '#zdog3',
|
||
|
|
rotate: { x: -TAU/16},
|
||
|
|
dragRotate: true,
|
||
|
|
onDragStart: function() {
|
||
|
|
isSpinning = false;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
var rotor = new Zdog.Anchor({
|
||
|
|
addTo: illo,
|
||
|
|
});
|
||
|
|
|
||
|
|
new Zdog.Rect({
|
||
|
|
addTo: rotor,
|
||
|
|
width: 80,
|
||
|
|
height: 60,
|
||
|
|
translate: { z: 50 },
|
||
|
|
stroke: 8,
|
||
|
|
fill: true,
|
||
|
|
color: '#EA0',
|
||
|
|
// backface color
|
||
|
|
backface: '#636',
|
||
|
|
});
|
||
|
|
|
||
|
|
new Zdog.Yun({
|
||
|
|
addTo: rotor,
|
||
|
|
closed: false,
|
||
|
|
stroke: 8,
|
||
|
|
scale : 25,
|
||
|
|
translate: { z: 60 },
|
||
|
|
color: '#636',
|
||
|
|
});
|
||
|
|
|
||
|
|
rotor.copyGraph({
|
||
|
|
rotate: { y: TAU * 1/4 },
|
||
|
|
});
|
||
|
|
rotor.copyGraph({
|
||
|
|
rotate: { y: TAU * 2/4 },
|
||
|
|
});
|
||
|
|
rotor.copyGraph({
|
||
|
|
rotate: { y: TAU * 3/4 },
|
||
|
|
});
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
illo.rotate.y += isSpinning ? 0.03 : 0;
|
||
|
|
illo.updateRenderGraph();
|
||
|
|
requestAnimationFrame( animate );
|
||
|
|
}
|
||
|
|
|
||
|
|
animate();
|
||
|
|
|
||
|
|
})()
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|