canvas曲线绘制图形过程效果-html代码-BFW代码库

canvas曲线绘制图形过程效果

代码语言：html

所属分类：动画

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

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

<style>
* {
  box-sizing: border-box;
}
body {
  -webkit-box-align: center;
          align-items: center;
  background: #111;
  display: -webkit-box;
  display: flex;
  margin: 0;
  min-height: 100vh;
  -webkit-box-pack: center;
          justify-content: center;
  overflow: hidden;
}
canvas {
  height: 50vmin;
  width: 50vmin;
  max-height: 600px;
  max-width: 600px;
  min-height: 300px;
  min-width: 300px;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
  -webkit-transform: translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
          transform: translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
}
canvas.showcase {
  --x: -17.5;
  --y: -17.5;
}
</style>

</head>
<body translate="no">
<canvas class="showcase"></canvas>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script >
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const {
  dat: { GUI } } =
window;
const CANVAS = document.querySelector('canvas');
const CONTEXT = CANVAS.getContext('2d');
const SIZE = 600;
const UNIT = SIZE / 3;
const CONTROLLER = new GUI();
const CONFIG = {
  PAUSED: false,
  CENTERED: true,
  HIDE_GUIDES_ON_PAUSE: true,
  STROKE: {
    COLOR: {
      HUE: Math.random() * 360,
      SATURATION: 100,
      LIGHTNESS: 50,
      ALPHA: 1 },

    WIDTH: 5 },

  DOTS: {
    COLOR: {
      HUE: Math.random() * 360,
      SATURATION: 100,
      LIGHTNESS: 50,
      ALPHA: 1 } },


  GUIDES: {
    WIDTH: 5,
    COLOR: {
      HUE: Math.random() * 360,
      SATURATION: 0,
      LIGHTNESS: 50,
      ALPHA: 0.2 } } };




CANVAS.width = CANVAS.height = SIZE;
class Dial {
  constructor(options) {_defineProperty(this, "update",









    () => {
      this.CONTEXT.save();
      this.CONTEXT.clearRect(0, 0, UNIT, UNIT);
      this.CONTEXT.strokeStyle = `hsla(${CONFIG.GUIDES.COLOR.HUE}, ${CONFIG.GUIDES.COLOR.SATURATION}%, ${CONFIG.GUIDES.COLOR.LIGHTNESS}%, ${CONFIG.GUIDES.COLOR.ALPHA})`;
      this.CONTEXT.lineWidth = 10;
      this.CONTEXT.translate(UNIT / 2, UNIT / 2);
      this.CONTEXT.rotate(this.ROTATION * Math.PI / 180);
      this.CONTEXT.translate(-UNIT / 2, -UNIT / 2);
      this.CONTEXT.beginPath();
      this.CONTEXT.arc(UNIT / 2, UNIT / 2, this.RADIUS, 0, 360 * Math.PI / 180);
      this.CONTEXT.stroke();
      this.CONTEXT.beginPath();
      this.CONTEXT.fillStyle = `hsla(${CONFIG.DOTS.COLOR.HUE}, ${CONFIG.DOTS.COLOR.SATURATION}%, ${CONFIG.DOTS.COLOR.LIGHTNESS}%, ${CONFIG.DOTS.COLOR.ALPHA})`;
      this.CONTEXT.arc(
      UNIT / 2,
      UNIT / 2 - this.RADIUS,
      10,
      0,
      360 * Math.PI / 180);

      this.CONTEXT.fill();
      this.CONTEXT.restore();
      this.ROTATION = this.ROTATION + this.SPEED;
      return this.CANVAS;
    });_defineProperty(this, "getXY",
    () => {
      // know the radius is 25 and the size is 60
      // x is 25cos(current rotation)
      // y is 25sin(current rotation)
      // That's from the center point also so normalize with 30 👍
      const x = Math.round(
      UNIT / 2 + this.RADIUS * Math.sin(this.ROTATION * Math.PI / 180));

      const y = Math.round(
      UNIT / 2 - this.RADIUS * Math.cos(this.ROTATION * Math.PI / 180));

      return { x, y };
    });this.ROTATION = 90;this.SPEED = options.speed;this.RADIUS = options.radius;this.CLOCKWISE = options.clockwise;this.CANVAS = document.createElement('canvas');this.CANVAS.width = this.CANVAS.height = UNIT;this.CONTEXT = this.CANVAS.getContext('2d');return this;}.........完整代码请登录后点击上方下载按钮下载查看