-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (94 loc) · 3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
.father{
display: flex;
align-items:center;
justify-content: center;
width: 100%;
height:100vh;
background-color: rgba(0,0,0,0.8);
}
#canvas{
background: linear-gradient(red, blue); /* 标准的语法 */
display: flex;
}
</style>
</head>
<body>
<div class="father">
<canvas id="canvas" width="400px" height="400px"></canvas>
</div>
</body>
<script>
var can = document.getElementById('canvas');
var ctx = can.getContext("2d");
var mWidth = canvas.width; //画布的宽
var mHeight = canvas.height; //画布的高
var mMaxOffset = 150; //圆最大偏移量
var mMaxRadius = 30; //圆半径
var mColor = '#fff'; //颜色
var mOffset = 0; //偏移量
var mDegrees = 0; //画布转角
//第一步 画圆
function drawCircle() {
ctx.clearRect(0, 0, mWidth, mHeight);
ctx.beginPath();
ctx.arc(mWidth / 2, mHeight / 2 - mOffset, mMaxRadius, 0, Math.PI * 2); //在中心点上方mOffset处画圆
ctx.closePath();
ctx.fillStyle = mColor;
ctx.fill();
ctx.beginPath();
ctx.arc(mWidth / 2, mHeight / 2 + mOffset, mMaxRadius, 0, Math.PI * 2); //在中心点下方mOffset处画圆
ctx.closePath();
ctx.fill();
}
//第二步 使画布旋转起来
setInterval(function() {
drawCircle();
rotate();
var present = mDegrees / 360;
if (present < 0.5) {
mOffset = mMaxOffset * present; //改变圆心位置，使其靠近中心点
} else {
mOffset = mMaxOffset * (1 - present);
}
//第三步 就是粘合动画函数
if (present <= 0.375 || present >= 0.625) drawPath(present); //当两圆接触时绘制粘合动画
}, 30)
function rotate() {
canvas.style.transform = `rotate(${mDegrees}deg)`; //使canvas旋转
mDegrees += 2;
if (mDegrees == 360) {
mDegrees = 0;
}
}
//第四步 就是粘合动画函数
function drawPath(present) {
var suppoetOffset = -mMaxRadius;
ctx.beginPath();
ctx.moveTo(mWidth / 2 - mMaxRadius, mHeight / 2 - mOffset); //从上圆最左点开始画线
ctx.lineTo(mWidth / 2 + mMaxRadius, mHeight / 2 - mOffset); //到上圆最右点
if (present < 0.25 || present > 0.75) { //当两球相交
suppoetOffset = mMaxRadius;
} else if (present <= 0.375) { //当两球刚分离时
suppoetOffset = -(480 * present - 150);
} else if (present >= 0.625) { //当两球快要接触时
suppoetOffset = 480 * present - 330;
}
// 贝塞尔选点以中心点便宜30以内距离为控制点，另一圆边点为结束点
ctx.quadraticCurveTo(mWidth / 2 + suppoetOffset, mHeight / 2, mWidth / 2 + mMaxRadius, mHeight / 2 + mOffset);
ctx.lineTo(mWidth / 2 - mMaxRadius, mHeight / 2 + mOffset);
ctx.quadraticCurveTo(mWidth / 2 - suppoetOffset, mHeight / 2, mWidth / 2 - mMaxRadius, mHeight / 2 - mOffset);
ctx.closePath();
ctx.fill();
}
</script>
</html>