zdog实现三维可拖拽卡通可爱小乌龟效果代码-html代码-BFW代码库

zdog实现三维可拖拽卡通可爱小乌龟效果代码

代码语言：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;
  font-family: sans-serif;
  text-align: center;
  background: #BBEEDB;
  color: #356F66;
}

canvas {
  display: block;
  margin: 0px auto 8px;
  cursor: move;
  background: #BBEEDB;
}

#container {
  margin-bottom: 8px;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div id='container'>
  <canvas class="zdog-canvas" width="320" height="320"></canvas>
  <p>Click and drag to rotate.</p>
</div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
<script >
      const body_color = '#A4C74B',
      face_color = '#4B264B',
      tummy_color ='#8CB746',
      shell_color = '#356F66',
      accent_color = '#397E71';

// create illo
let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  rotate: { x: Zdog.TAU*10/128, y: -0.05},
  zoom: 1.2,
  dragRotate: true,
});

// SHAPES
let shell = new Zdog.Hemisphere({
  addTo: illo,
  diameter: 124,
  rotate: { x: Zdog.TAU/4 },
  // fill enabled by default
  // disable stroke for crisp edge
  stroke: false,
  color: shell_color,
});
let shell_rim = new Zdog.Ellipse({
  addTo: shell,
  translate: { z: -1 },
  diameter: 126,
  stroke: 12,
  color: accent_color,
});
let tummy = new Zdog.Ellipse({
  addTo: shell,
  translate: { z: -8 },
  diameter: 90,
  stroke: 8,
  color: tummy_color,
  fill: true,
});

let head = new Zdog.Shape({
  addTo: shell,
  translate: { y: 90, z: 15 },
  stroke: 55,
  color: body_color,
});
// eye on left
let eye = new Zdog.Shape({
  addTo: head,
  translate: { x: -16, y: 10, z: 3 },
  stroke: 10,
  color: face_color,
});
// eye on right
eye.copy({
  translate: { x: 16, y: 10, z: 3 },
});
let smile = new Zdog.Ellipse({
  addTo: head,
  diameter: 10,
  quarters: 2, // semi-circle
  translate: { x: 0, y: 24, z: -10 },
  // rotate semi-circle to point up
  rotate: { x: Zdog.TAU*11/16, z: Zdog.TAU/4 },
  color: face_color,
  stroke: 3,
});

let neck = new Zdog.Shape({
	addTo: shell,
	path: [
    { x: 0, y: 40, z: -14 }, // start at 1st point (in shell)
    { arc: [
      { x:  0, y: 60, z: -30 }, // corner
      { x:  0, y: 80, z: -6 }, // end point (in head)
    ]},
  ],
  closed: false,
  stroke: 24,
  color: body_color,
});
// leg on front, right
let leg_fr = new Zdog.Shape({
	addTo: shell,
	path: [
    { x: 23, y: 28, z: -16 }, // start at 1st point (in shell)
    { arc: [
      { x: 60, y: 34, z: -24 }, // corner
      { x: 60, y: 36, z: -36 }, // end point (in head)
    ]},
  ],
  closed: false,
 .........完整代码请登录后点击上方下载按钮下载查看