-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcanvas-2.html
153 lines (139 loc) · 3.55 KB
/
canvas-2.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html>
<head>
<title>Canvas test</title>
<meta charset='utf-8' />
<style>
</style>
</head>
<body>
<h1>Canvas demo</h1>
<div>test</div>
<div class='outer'>
<canvas id="tutorial" width="500" height="500"
style="border: 1px solid red"></canvas>
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
</canvas>
</div>
<script>
var canvas = document.getElementById("tutorial");
var c = canvas.getContext("2d");
function test1() {
var canvas = document.getElementById("tutorial");
var c = canvas.getContext("2d");
c.fillStyle = "green";
c.fillRect(10, 10, 100, 100);
}
//TEST 2
function test2() {
c.fillStyle = 'red';
c.beginPath();
c.moveTo(10, 30);
c.bezierCurveTo(228, 90, 159, -30, 200, 30);
c.lineTo(200, 90);
c.lineTo(210, 106);
c.lineTo(10, 90);
c.closePath();
c.fill();
c.lineWidth = 4;
c.strokeStyle = '黑';
c.stroke();
}
// 单次贝塞尔曲线.
function test3() {
c.beginPath();
c.moveTo(20, 20);
c.bezierCurveTo(20, 100, 200, 0, 200, 80);
// c.bezierCurveTo(20,100,200,100,200,20);
c.lineWidth = 6;
c.stroke();
}
//填充文本.
function test4() {
console.log(234)
c.fillStyle = "black";
c.font = "italic " + 96 + "pt Arial ";
c.fillText("this is test", 20, 53);
// c.stroke();
}
function testPie() {
var data = [ 100, 68, 20, 30, 100 ];
c.fillStyle = "white";
c.fillRect(0, 0, 500, 500);
//a list of colors
var colors = [ "orange", "green", "blue", "yellow", "teal" ];
//calculate total of all data
var total = 0;
for (var i = 0; i < data.length; i++) {
total += data[i];
}
//draw pie data
var prevAngle = 0;
for (var i = 0; i < data.length; i++) {
//fraction that this pieslice represents
var fraction = data[i] / total;
//calc starting angle
var angle = prevAngle + fraction * Math.PI * 2;
//draw the pie slice
// c.fillStyle = colors[i];
//fill with a radial gradient
var grad = c.createRadialGradient(250, 250, 10, 250, 250, 100);
grad.addColorStop(0, "white");
grad.addColorStop(1, colors[i]);
c.fillStyle = grad;
//create a path
c.beginPath();
c.moveTo(250, 250);
c.arc(250, 250, 100, prevAngle, angle, false);
c.lineTo(250, 250);
//fill it
c.fill();
//stroke it
c.strokeStyle = "black";
c.stroke();
//update for next time through the loop
prevAngle = angle;
}
//draw centered text
c.fillStyle = "black";
c.font = "24pt sans-serif";
var text = "Sales Data from 2025";
var metrics = c.measureText(text);
c.fillText(text, 250 - metrics.width / 2, 400);
}
//跨浏览器的 animate.
window.requestAnimFrame = (function() {
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
//测试动画.
function testAnimate() {
var x = 0;
function drawIt() {
window.requestAnimFrame(drawIt);
// c.clearRect(0,0,canvas.width,canvas.height);
// var canvas = document.getElementById('canvas');
// var c = canvas.getContext('2d');
c.fillStyle = "red";
c.fillRect(x, 100, 200, 100);
x += 5;
}
window.requestAnimFrame(drawIt);
}
testAnimate();
// testPie();
// test4();
// test3();
// test2();
// test1();
</script>
</body>
</html>