<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>Canvas on Archai&#39;s home</title>
    <link>https://blog.archai.space/tags/canvas/</link>
    <description>Recent content in Canvas on Archai&#39;s home</description>
    <generator>Hugo -- gohugo.io</generator>
    <lastBuildDate>Sun, 20 Mar 2022 00:00:00 +0000</lastBuildDate><atom:link href="https://blog.archai.space/tags/canvas/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>canvas绘制跟随鼠标移动的线条</title>
      <link>https://blog.archai.space/p/canvas%E7%BB%98%E5%88%B6%E8%B7%9F%E9%9A%8F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E7%9A%84%E7%BA%BF%E6%9D%A1/</link>
      <pubDate>Sun, 20 Mar 2022 00:00:00 +0000</pubDate>
      
      <guid>https://blog.archai.space/p/canvas%E7%BB%98%E5%88%B6%E8%B7%9F%E9%9A%8F%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E7%9A%84%E7%BA%BF%E6%9D%A1/</guid>
      <description>在浏览网页时无意中发现了下面这种背景互动的效果：

通过一番周折，最终找到以下实现代码
function randomLine() { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { return document.getElementsByTagName(n) } function t() { var t = e(&amp;#34;script&amp;#34;), o = t.length, i = t[o - 1]; return { l: o, z: n(i, &amp;#34;zIndex&amp;#34;, -88), o: n(i, &amp;#34;opacity&amp;#34;, .5), c: n(i, &amp;#34;color&amp;#34;,&amp;#34;0,0,0&amp;#34;), n: n(i, &amp;#34;count&amp;#34;, 150) } } function o() { a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.</description>
    </item>
    
  </channel>
</rss>
