ic 卡

2022-12-22 14:57:51 +08:00
parent 95f09d0ad7
commit 635587335b
2277 changed files with 408903 additions and 16 deletions
@@ -0,0 +1,263 @@
+<!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>