two.js实现指针时钟效果代码

代码语言:html

所属分类:其他

代码描述:two.js实现指针时钟效果代码

代码标签: Two.js 时钟 时间

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/two.js"></script>

    <script>
   
const two = new Two({
  type: Two.Types.svg,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

two.renderer.domElement.style.background = '#efefef';

const TWO_PI = Math.PI * 2;
const drag = 0.125;
const radius = Math.min(two.width, two.height) * 0.33;
const styles = {
  size: radius * 0.33,
  weight: 'bold',
  family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
  fill: 'black',
  opacity: 0.33
};

const ticks = two.makeCircle(0, 0, radius);
ticks.noFill();
ticks.dashes = [1, (TWO_PI * radius / 60 - 1)];
ticks.linewidth = 50;
ticks.stroke = 'rgba(0, 0, 0, 0.33)';

for (let i = 0; i < 12; i++) {

  const x = radius * Math.sin(i / 12 * TWO_PI);
  const y = - radius * Math.cos(i / 12 * TWO_PI);
  const number = new Two.Tex.........完整代码请登录后点击上方下载按钮下载查看

网友评论0