zdog实现骰子旋转效果-html代码-BFW代码库

zdog实现骰子旋转效果

代码语言：html

所属分类：动画

代码描述：zdog实现骰子旋转效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* center the canvas in the viewport */
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsl(250, 50%, 20%);
}
</style>

</head>
<body translate="no">
<canvas width="400" height="400"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
<script >
const { Illustration, Group, Anchor, Rect, TAU, Ellipse } = Zdog;
const element = document.querySelector('canvas');
const illustration = new Illustration({
  element,
  dragRotate: true });


// anchor point used for the rotation
const dice = new Anchor({
  addTo: illustration });


// group describing the faces through rounded rectangles
const faces = new Group({
  addTo: dice });

// due to the considerable stroke, it is possible to fake the dice using four faces only
const face = new Rect({
  addTo: faces,
  stroke: 50,
  width: 50,
  height: 50,
  color: 'hsl(5, 80%, 55%)',
  translate: {
    z: -25 } });



// rotate the faces around the center
face.copy({
  rotate: {
    x: TAU / 4 },

  translate: {
    y: 25 } });



face.copy({
  rotate: {
    x: TAU / 4 },

  translate: {
    y: -25 } });



face.copy({
  translate: {
    z: 25 } });



// include the dots repeating as many shapes/groups as possible
// ! when copying an element be sure to reset the rotation/translation of the copied shape
const one = new Ellipse({
  addTo: dice,
  diameter: 15,
  stroke: false,
  fill: true,
  color: 'h.........完整代码请登录后点击上方下载按钮下载查看