贝塞尔曲线
parent
77d40b8cb3
commit
c24c6751db
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue