svg、canvas 波浪效果和 svg 路径学习记录
svg主要是利用animate 的 attributeName="d"来改变轨迹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#canvas{
box-sizing: content-box;
padding: 5px;
background-color: #fff;
border-radius: 100%;
position: relative;
border: 10px solid rgba(154, 205, 50, .8);
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
<!-- Wave -->
<g id="wave">
<path id="wave-2" fill="rgba(154, 205, 50, .8)" d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 200 100 Z">
<animate dur="5s" repeatCount="indefinite" attributeName="d" attributeType="XML" values="M0 100 C100 18, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C92 179,120 28, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C100 18, 92 179, 200 100 A95 95 0 0 1 0 100 Z"></animate>
</path>
</g>
<circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
<circle cx="100" cy="100" r="90" stroke-width="20" stroke="yellowgreen" fill="none" class="percentage-pie-svg"></circle>
</svg>
<svg width="320px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M10 315
L 110 215
A 30 50 90 0 0 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>
<script>
window.onload = function () {
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let radians = (Math.PI / 180) * 180;
let startTime = Date.now();
let time = 2000;
let clockwise = 1;
let cp1x, cp1y, cp2x, cp2y;
// 左边波浪起的状态
// ctx.bezierCurveTo(90, 28, 92, 179, 200, 100);
// 平稳状态
// ctx.bezierCurveTo(145, 100, 41, 100, 200, 100);
//右边波浪起的状态
// ctx.bezierCurveTo(90, 172, 92, 21, 200, 100);
requestAnimationFrame(function waveDraw() {
let t = Math.min(1.0, (Date.now() - startTime) / time);
if (clockwise == 1) {//从初始左边波浪渐变到当t=1时的平稳状态
cp1x = 90 + (55 * t);//t=0,为要的初始形状,t=1时,为当前的最终形状
cp1y = 28 + (72 * t);
cp2x = 92 - (51 * t);
cp2y = 179 - (79 * t);
} else if (clockwise == 2) {//从平稳状态变化到右边波浪起来
cp1x = 145 - (55 * t);
cp1y = 100 + (72 * t);
cp2x = 41 + (51 * t);
cp2y = 100 - (79 * t);
} else if (clockwise == 3) {//右边波浪渐变到当t=1时的平稳状态
cp1x = 90 + (55 * t);
cp1y = 172 - (72 * t);
cp2x = 92 - (51 * t);
cp2y = 21 + (79 * t);
} else {////从平稳状态变化到左边波浪起来
cp1x = 145 - (55 * t);
cp1y = 100 - (72 * t);
cp2x = 41 + (51 * t);
cp2y = 100 + (79 * t);
}
ctx.clearRect(0, 0, 200, 200);
ctx.beginPath();
ctx.moveTo(0, 100);
// 绘制三次贝塞尔曲线
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, 200, 100);
// 绘制圆弧
ctx.arc(100, 100, 100, 0, radians, 0);
ctx.fillStyle = "rgba(154, 205, 50, .8)";
ctx.fill();
ctx.save();
if (t == 1) {
startTime = Date.now();
if (clockwise === 4) {
clockwise = 1;
} else {
clockwise += 1;
}
// clockwise = !clockwise;
}
requestAnimationFrame(waveDraw);
});
}
</script>
</body>
</html>
svg常用的M(移动),L(画线),H(平行线,横线),V(垂直线,竖线),Z(从当前点画一条直线到路径的起点)
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
//两个是一样的,只不过一个使用Z来完成闭合
C(三次贝塞尔曲线(波浪线))
三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)，最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。
CCC.png
<path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
S(简写的贝塞尔曲线命令)
一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。可以使用一个简写的贝塞尔曲线命令S：S x2 y2, x y (or s dx2 dy2, dx dy)，S命令可以用来创建与之前那些曲线一样的贝塞尔曲线，但是，如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点
SSS.png
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
//S的第一个控制点是65 10 对于95 80的对称点,也就是125,150,第二个控制点是150 150
Q(二次贝塞尔曲线)
二次贝塞尔曲线Q比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。需要两组参数，控制点和终点坐标。x1y1为控制点坐标,xy为终点坐标Q命令：Q x1 y1, x y (or q dx1 dy1, dx dy)
QQQ.png
<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
T(简写的二次贝塞尔曲线命令)
快捷命令T会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
//跟着Q后面的T的控制点是52.5 10 对于95 80的对称点137.5 150
A(弧线)
命令:A rx(x轴半径) ry(y轴半径) x-axis-rotation(弧形的旋转情况:0~180) large-arc-flag(角度大小,决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧) sweep-flag(弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧) x y(终点坐标)
<path d="M10 315
L 110 215
A 30 50 90 0 0 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
上一篇： Kaggle 泰坦尼克号沉船事故 - 逻辑回归预测存活率
下一篇： 甲骨文中复杂的行列转换（第一项）