From c24c6751dbc1c5ba79b52a0e5e02318835785258 Mon Sep 17 00:00:00 2001
From: jlzhou <12020042@qq.com>
Date: Fri, 7 Feb 2025 10:22:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=9D=E5=A1=9E=E5=B0=94=E6=9B=B2=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 flying-line-chart/三次贝塞尔曲线.html  | 32 +++++++++
 flying-line-chart/二次贝塞尔曲线.html  | 23 +++++++
 flying-line-chart/二次贝塞尔曲线1.html | 28 ++++++++
 .../二次贝塞尔曲线svg.html             | 65 +++++++++++++++++++
 .../二次贝塞尔曲线图片裁剪.html    | 27 ++++++++
 5 files changed, 175 insertions(+)
 create mode 100644 flying-line-chart/三次贝塞尔曲线.html
 create mode 100644 flying-line-chart/二次贝塞尔曲线.html
 create mode 100644 flying-line-chart/二次贝塞尔曲线1.html
 create mode 100644 flying-line-chart/二次贝塞尔曲线svg.html
 create mode 100644 flying-line-chart/二次贝塞尔曲线图片裁剪.html
diff --git a/flying-line-chart/三次贝塞尔曲线.html b/flying-line-chart/三次贝塞尔曲线.html
new file mode 100644
index 0000000..a2084b1
--- /dev/null
+++ b/flying-line-chart/三次贝塞尔曲线.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title></title>
+    <meta charset="utf-8" />
+    <script type="text/javascript">
+        function $$(id) {
+            return document.getElementById(id);
+        }
+        window.onload = function () {
+            var cnv = $$("canvas");
+            var cxt = cnv.getContext("2d");
+
+            //绘制三次贝塞尔曲线
+            var startX = 20;
+            var startY = 80;
+            var cx1 = 20;
+            var cy1 = 20;
+            var cx2 = 120;
+            var cy2 = 120;
+            var endX = 120;
+            var endY = 60;
+            cxt.moveTo(startX, startY);
+            cxt.bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY);
+            cxt.stroke();
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
+</body>
+</html>
diff --git a/flying-line-chart/二次贝塞尔曲线.html b/flying-line-chart/二次贝塞尔曲线.html
new file mode 100644
index 0000000..5dfbc41
--- /dev/null
+++ b/flying-line-chart/二次贝塞尔曲线.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title></title>
+    <meta charset="utf-8" />
+    <script type="text/javascript">
+        function $$(id) {
+            return document.getElementById(id);
+        }
+        window.onload = function () {
+            var cnv = $$("canvas");
+            var cxt = cnv.getContext("2d");
+
+            cxt.moveTo(30, 120);
+            cxt.quadraticCurveTo(100, 20, 160, 120);
+            cxt.stroke();
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
+</body>
+</html>
diff --git a/flying-line-chart/二次贝塞尔曲线1.html b/flying-line-chart/二次贝塞尔曲线1.html
new file mode 100644
index 0000000..36f2a0e
--- /dev/null
+++ b/flying-line-chart/二次贝塞尔曲线1.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title></title>
+    <meta charset="utf-8" />
+    <script type="text/javascript">
+        function $$(id) {
+            return document.getElementById(id);
+        }
+        window.onload = function () {
+            var cnv = $$("canvas");
+            var cxt = cnv.getContext("2d");
+
+            cxt.moveTo(75, 25);
+            cxt.quadraticCurveTo(25, 25, 25, 62);
+            cxt.quadraticCurveTo(25, 100, 50, 100);
+            cxt.quadraticCurveTo(50, 120, 30, 125);
+            cxt.quadraticCurveTo(60, 120, 65, 100);
+            cxt.quadraticCurveTo(125, 100, 125, 62);
+            cxt.quadraticCurveTo(125, 25, 75, 25);
+            cxt.stroke();
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
+</body>
+</html>
diff --git a/flying-line-chart/二次贝塞尔曲线svg.html b/flying-line-chart/二次贝塞尔曲线svg.html
new file mode 100644
index 0000000..7e43e16
--- /dev/null
+++ b/flying-line-chart/二次贝塞尔曲线svg.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>二次贝塞尔曲线动画</title>
+</head>
+
+<body>
+    <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"
+        style="outline: solid #000 1px; width: 90vmin; aspect-ratio: 1/1;">
+        <!-- 定义阴影滤镜 -->
+        <defs>
+            <filter id="shadow" x="-200%" y="-200%" width="500%" height="500%">
+                <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="red" flood-opacity="1" />
+            </filter>
+
+            <!-- 定义线性渐变 -->
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" style="stop-color: black; stop-opacity: 1" />
+                <stop offset="100%" style="stop-color: white; stop-opacity: 1" />
+            </linearGradient>
+
+            <!-- 定义mask -->
+            <mask id="mask">
+                <rect x="-20" y="-1" width="20" height="3" fill="url(#gradient)">
+                    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">
+                        <mpath href="#bezierPath" />
+                    </animateMotion>
+                </rect>
+            </mask>
+        </defs>
+            <!-- 定义二次贝塞尔曲线路径 -->
+            <path id="bezierPath" d="
+            M 10,10 
+            Q 290,10,290,290 
+            Q 10,290,10,10
+            L 290,290
+            C 100,200,200,100,10,10
+            " stroke-width="1" stroke="#0001" fill="none" />
+
+            <path  d="
+            M 10,10 
+            Q 290,10,290,290 
+            Q 10,290,10,10
+            L 290,290
+            C 100,200,200,100,10,10
+            " stroke-width="1" stroke="red" fill="none" mask="url(#mask)" />
+
+            <!-- 定义光点 -->
+            <circle cx="0" cy="0" r="1" fill="red" filter="url(#shadow)">
+                <!-- 使用animateMotion让光点沿路径移动 -->
+                <animateMotion dur="5s" repeatCount="indefinite" calcMode="linear">
+                    <mpath href="#bezierPath" rotate="reverse" />
+                </animateMotion>
+            </circle>
+       
+
+
+
+    </svg>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/flying-line-chart/二次贝塞尔曲线图片裁剪.html b/flying-line-chart/二次贝塞尔曲线图片裁剪.html
new file mode 100644
index 0000000..569a9a2
--- /dev/null
+++ b/flying-line-chart/二次贝塞尔曲线图片裁剪.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>二次贝塞尔曲线动画</title>
+</head>
+<body>
+    <svg width="500" height="300">
+        <defs>
+            <clipPath id="clip">
+                <path d="M10,10 Q290,10 490,290 M490,292 Q290,10 10,10"/>
+            </clipPath>
+        </defs>
+        <path id="bezierPath" d="M10,10 Q290,10 490,290" stroke="#0005" fill="none" stroke-width=".1em" />
+    </svg>
+    <div class="ss"></div>
+    <style>
+        .ss {
+            width: 500px;
+            height: 300px;
+            background-color: red;
+            clip-path: url(#clip);
+        }
+    </style>
+</body>
+</html>
\ No newline at end of file
