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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dashed Line</title>
<script src="../dist/zrender.js"></script>
</head>
<body>
<div id="main" style="width:1200px;height:600px;"></div>
<script type="text/javascript">
// 初始化zrender
var zr = zrender.init(document.getElementById('main'));
var points = [];
for (var i = 0; i < 10; i++) {
points.push([Math.random() * 800 + 300, Math.random() * 500 + 100]);
}
var polyline = new zrender.Polyline({
style: {
lineDash: [10, 10],
stroke: 'rgba(220, 20, 60, 0.8)',
lineWidth: 10
},
shape: {
points: points,
smooth: 0.5
}
});
zr.add(polyline);
polyline.animate('style', true)
.when(1000, {
lineDashOffset: 20
})
.start();
var line = new zrender.Line({
style: {
lineDash: [10, 10],
stroke: 'rgba(10, 80, 60, 0.8)'
},
shape: {
x1: 100,
y1: 100,
x2: 500,
y2: 500
}
});
zr.add(line);
line.animate('style', true)
.when(1000, {
lineDashOffset: -20
})
.start();
var star = new zrender.Star({
style: {
lineDash: [20, 10],
stroke: 'black',
fill: null
},
shape: {
n: 5,
r: 100,
cx: 300,
cy: 200
}
});
zr.add(star);
star.animate('style', true)
.when(1000, {
lineDashOffset: 30
})
.start();
var curve = new zrender.BezierCurve({
style: {
lineDash: [5, 5],
lineDashOffset: 0
},
shape: {
x1: 100, y1: 100,
x2: 100, y2: 500,
x3: 500, y3: 100,
x4: 500, y4: 500
}
});
zr.add(curve);
curve.animate('style', true)
.when(1000, {
lineDashOffset: -10
})
.start();
</script>
</body>
</html>
|
