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:.........完整代码请登录后点击上方下载按钮下载查看