凯尔特螺旋动画旋转效果-html代码-BFW代码库

凯尔特螺旋动画旋转效果

代码语言：html

所属分类：动画

代码描述：凯尔特螺旋动画旋转效果

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

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

<style>
body {
  background-color: #000;
  font-family: Arial, sans-serif;
}

canvas {
  display: block;
  margin: 0 auto;
  margin: calc(50vh - 240px) auto 0;
  background-color: #000;
}

p {
  text-align: center;
}
</style>

</head>
<body translate="no">
<canvas id="canvas">Su navegador no soporta canvas :( </canvas>

<script >
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = 500,
cx = cw / 2;
var ch = canvas.height = 500,
cy = ch / 2;
ctx.lineWidth = 2;
var rad = Math.PI / 180;
var frames = 0;
var points = [];
var a1 = -90 * rad;
var a2 = a1 + 120 * rad;
var a3 = a2 + 120 * rad;

var n = 7;
var R = 17 * n;
var c1 = getCenter(a1);
var c2 = getCenter(a2);
var c3 = getCenter(a3);

function getCenter(a) {
  return {
    x: cx + R * Math.cos(a),
    y: cy + R * Math.sin(a) };

}

function celtic1(c, rot) {
  for (var i = 0; i < 780; i += .5) {
    var o = {};
    o.t = -i * rad;
    o.R = -n * o.t;
    o.r = 500 / 780 * i .........完整代码请登录后点击上方下载按钮下载查看