试试画一个完美的圆

2020-06-07 20:42:10 +08:00
 lanhaooclub

网上看见的这个网站, 画一个完美的圆

https://vole.wtf/perfect-circle/

然后主页上也有一些神奇的东西。。。。🤦‍

2693 次点击
所在节点    分享发现
13 条回复
winterbells
2020-06-07 20:52:29 +08:00
93.8%最高 哈哈哈哈哈
dandycheung
2020-06-07 21:05:19 +08:00
94.6
ob
2020-06-07 21:07:19 +08:00
96.5
Ultraman
2020-06-07 21:09:25 +08:00
还触发个类似彩蛋的玩意儿
https://i.loli.net/2020/06/07/C1OGnb3dcqIWLYM.jpg
systemcall
2020-06-07 21:22:28 +08:00
96.8
小学的时候,信息课考试考过拿鼠标画圆
lanhaooclub
2020-06-07 21:28:05 +08:00
@Ultraman 哈哈哈哈哈 uncontrollable urge 哈哈哈哈哈
godonlyknows
2020-06-07 21:28:54 +08:00
97.6
IzayakI
2020-06-07 21:30:39 +08:00
@Ultraman 这是广告,让你关注他推特啥的
IzayakI
2020-06-07 21:34:54 +08:00
92.9
Ultraman
2020-06-07 21:56:09 +08:00
@IzayakI #8 我知道,但是这个文案还有视觉效果挺有意思的.
miaeLKK
2020-06-07 22:02:53 +08:00
分高的都是杨二嫂,对,就我笔下的那个,哈哈
rabbbit
2020-06-07 22:56:20 +08:00
尽梨了,谁能告诉我剩下的那 0.2 差在哪?



```
function sleep(time = 100) {
  return new Promise((reslove) => {
   setTimeout(() => {
    reslove();
  }, time)
 })
}

async function drawCircleByMouse(canvasEl, centerX, centerY, radius = 200) {
  let radian = 0;
  const pointers = [];

  while (radian < Math.PI * 2) {
   const x = centerX + Math.cos(radian) * radius
   const y = centerY + Math.sin(radian) * radius
   pointers.push({ x, y });
   radian += 0.1;
 }

  const startPoint = pointers[0];
  const mousedownEnt = new MouseEvent("mousedown", { clientX: startPoint.x, clientY: startPoint.y, bubbles: true });
  canvasEl.dispatchEvent(mousedownEnt);

  for (let point of pointers) {
   await sleep();
   const mousemoveEnt = new MouseEvent("mousemove", { clientX: point.x, clientY: point.y, bubbles: true });
   canvasEl.dispatchEvent(mousemoveEnt);
   radian += 0.01;
 }

  const mousemoveEnt = new MouseEvent("mousemove", { clientX: startPoint.x, clientY: startPoint.y, bubbles: true });
  canvasEl.dispatchEvent(mousemoveEnt);

  const endPoint = pointers[pointers.length - 1];
  const mouseupEnt = new MouseEvent("mouseup", { clientX: endPoint.x, clientY: endPoint.y, bubbles: true });
  canvasEl.dispatchEvent(mouseupEnt);
}

document.querySelector('a').click();
setTimeout(async () => {
  const el = document.querySelector('div');
  const rect = el.getBoundingClientRect();
  const rem = window.innerHeight / 100 * 9;
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2 - 20;
  await drawCircleByMouse(el, centerX, centerY);
}, 2000);
```
lanhaooclub
2020-06-08 00:16:23 +08:00
@rabbbit 代码很棒, 剩下的 0.2,我这边屏幕 4800*4000, 设置 radius 1200 以上就 OK

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/679489

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX