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,
  color: sunClr });


// Sea Group
const seaGroup = new Zdog.Group({
  addTo: illo,
  translate: { y: 100, z: 200 } });


// Sea
new Zdog.Ellipse({
  addTo: seaGroup,
  stroke: 60,
  diameter: 600,
  fill: true,
  quarters: 2,
  rotate: { z: Zdog.TAU / 4 },
  color: waterClr });


// Waves
new Zdog.Shape({
  addTo: seaGroup,
  stroke: 40,
  path: [
  { x: -300, y: -10 },
  { bezier: [
    { x: -280, y: -10 },
    { x: -260, y: 10 },
    { x: -240, y: -10 }] },

  { bezier: [
    { x: -220, y: -10 },
    { x: -200, y: 10 },
    { x: -180, y: -10 }] },

  { bezier: [
    { x: -160, y: -10 },
    { x: -140, y: 10 },
    { x: -120, y: -10 }] },

  { bezier: [
    { x: -100, y: -10 },
    { x: -80, y: 10 },
    { x: -60, y: -10 }] },

  { bezier: [
    { x: -40, y: -10 },
    { x: -20, y: 10 },
    { x: 0, y: -10 }] },

  { bezier: [
    { x: 20, y: -10 },
    { x: 40, y: 10 },
    { x: 60, y: -10 }] },

  { bezier: [
    { x: 80, y: -10 },
    { x: 100, y: 10 },
    { .........完整代码请登录后点击上方下载按钮下载查看