zdog实现3d三维彩虹效果-html代码-BFW代码库

zdog实现3d三维彩虹效果

代码语言：html

所属分类：三维

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

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

<style>
body {
  background: #FABEF2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
}

.zdog-canvas {
  cursor: move;
}
</style>

</head>
<body translate="no">
<canvas class="zdog-canvas" width="800" height="480"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/zdog.dist.js"></script>
<script>
"use strict";
var red = '#f25774';
var orange = '#ffb65b';
var yellow = '#fdda74';
var green = '#4cbe5d';
var blue = '#4080ff';
var purple = '#7b64c0';
var brown = '#EB9678';
var gray = '#E8E8E8';
var raindowDiameter = 400;
var raindowStroke = 30;
var isSpinning = true;
var illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  dragRotate: true,
  zoom: 0.5,
  onDragStart: function () {
    isSpinning = false;
  },
  onDragEnd: function () {
    isSpinning = true;
  },
  rotate: { x: -0.22252947962927708, y: -202.38891615264924 } });

var rectRed = new Zdog.Ellipse({
  addTo: illo,
  diameter: raindowDiameter,
  quarters: 2,
  stroke: raindowStroke,
  color: red,
  rotate: { x: Zdog.TAU / 2, z: Zdog.TAU / 4 },
  translate: { y: 100 } });

var rectOra.........完整代码请登录后点击上方下载按钮下载查看