-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
110 lines (110 loc) · 2.98 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
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
position: fixed;
background: black;
}
#flower {
border: 1px solid red;
width: 500px;
height: 500px;
position: relative;
}
</style>
</head>
<body>
<div id="flower"></div>
</body>
<script>
(function (data) {
var _methods = {
// 初始化
init: function () {
this.data = data.data
this.e = data.e
this.count = data.number
this.color = data.color
// number = 度数° --- this.count = 循环次数
this.number = 360 / this.count
for (var i = 0, j = .1; i < this.count; i++, j += .1) {
var canvas = document.createElement('canvas')
canvas.id = 'flower' + i
canvas.height = data.height
canvas.width = data.width
canvas.style.position = 'absolute'
canvas.style.transition = j +'s ease'
this.$(this.e).appendChild(canvas)
// 绘图
this.painting(this.$('flower' + i))
}
// 动画
this.handle()
},
// 绘图
painting: function (e) {
var ctx = e.getContext("2d")
ctx.beginPath()
// ----起始坐标（x， y）
ctx.moveTo(this.data.start.x, this.data.start.y)
// ----曲线坐标（x, y）--结束坐标（x, y）
ctx.quadraticCurveTo(this.data.curve.x, this.data.curve.y, this.data.end.x, this.data.end.y)
/* 轴对称 --- 只针对曲线左到右 */
ctx.moveTo(this.data.start.x, this.data.start.y)
ctx.quadraticCurveTo(this.data.start.x + this.data.curve.x, this.data.curve.y, this.data.end.x, this.data.end.y)
ctx.fillStyle = this.color
ctx.strokeStyle = this.color
ctx.globalAlpha = 0.1
ctx.fill()
ctx.stroke()
},
// 动画
handle: function () {
var self = this
var i = 0
var timer = setInterval(function () {
if (i > self.count) {
clearInterval(timer)
return
}
self.$('flower' + i).style.transform = 'rotate('+ i * self.number +'deg)'
i++
})
},
$: function (dom) {
return document.getElementById(dom)
}
}
_methods.init()
})({
/* 配置项 */
/* 所有的Y轴为顶点到底部的距离值非左下角原点 */
e: "flower",
height: 500,
width: 500,
color: '#cc00ff',
data: {
// ----起始坐标（x， y）
start: {
x: 250,
y: 0
},
// ----曲线坐标（x, y）
curve: {
x: 125,
y: 125
},
// ----结束坐标（x， y）
end: {
x: 250,
y: 250
}
},
// 数量
number: 15
})
</script>
</html>