zdog实现帆船动画-html代码-BFW代码库

zdog实现帆船动画

代码语言：html

所属分类：动画

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

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

<style>
body{
        display: grid;
        place-items: center;
        height: 100vh;
        width: 100vw;
        margin: 0;
        background: #D7E8FC;
}

.zdog-canvas{
        border-radius: 50%;
}
</style>

</head>
<body translate="no">
<canvas class="zdog-canvas"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
<script >
const sunClr = '#FFE6BF';
const boatClr = '#1C3B42';
const waterClr = '#3C6490';
const fishClr = '#618DB3';
const birdClr = '#AABAC5';

const illoElem = document.querySelector('canvas');
const illoSize = 600;
const minWindowSize = Math.min(window.innerWidth, window.innerHeight);
const zoomSize = minWindowSize / illoSize;
const zoom = zoomSize < 1 ? zoomSize : Math.floor(zoomSize);

illoElem.setAttribute('width', illoSize * zoom);
illoElem.setAttribute('height', illoSize * zoom);

const illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  dragRotate: true,
  zoom: zoom });


// Birds
const bird1 = new Zdog.Group({
  addTo: illo,
  translate: { x: -120, y: -150, z: 80 } });


const wingLeft = new Zdog.Ellipse({
  addTo: bird1,
  width: 15,
  height: 20,
  rotate: { z: -Zdog.TAU / 6 },
  quarters: 2,
  translate: { x: -17, y: -6 },
  fill: true,
  color: fishClr });


const wingRight = new Zdog.Ellipse({
  addTo: bird1,
  width: 15,
  height: 20,
  rotate: { z: -Zdog.TAU / 3 },
  quarters: 2,
  translate: { x: -5, y: -6 },
  fill: true,
  color: fishClr });


const bird2 = bird1.copy({ translate: { x: 0, y: -180, z: 80 } });
wingLeft.copy({ addTo: bird2 });
wingRight.copy({ addTo: bird2 });

// Sun
const sun = new Zdog.Shape({
  addTo: illo,
  stroke: 40,
  stroke: 100,
  translate: { x: 120, y: -140, z: 100 },
  fill: true,
  .........完整代码请登录后点击上方下载按钮下载查看