-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas.html
72 lines (67 loc) · 2.07 KB
/
canvas.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas实现椭圆运动</title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<script>
var a = 200,
b = 100,
radius = 30;
time = 0; //循环的次数
window.onload = function() {
var canvas = document.getElementById('canvas');
canvas.height = 768;
canvas.width = 1024;
var cxt = canvas.getContext('2d');
centerPoint(cxt);
arcRoute(cxt, 300, 300, a, b, radius);
setInterval(function() {
arcRoute(cxt, 300, 300, a, b, radius);
}, 70);
};
//绘制原点
function centerPoint(cxt) {
cxt.fillStyle = "black";
cxt.beginPath();
cxt.arc(300, 300, 10, 0, 2 * Math.PI, true)
cxt.closePath();
cxt.fill();
}
//椭圆路线绘制
function route(context, x, y, a, b) {
var step = (a > b) ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step) {
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
}
//椭圆上小球运动的实现
function arcRoute(context, x, y, a, b, r) {
context.clearRect(0, 0, 1024, 768);
// route(context, x, x, a, b);
// centerPoint(context);
var step = (a > b) ? 1 / a : 1 / b;
context.fillStyle = "red";
if (time == 0) {
context.beginPath();
context.arc(x, y, r, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
} else {
context.beginPath();
context.arc(x + a * Math.cos(time), y + b * Math.sin(time), r, 0, 2 * Math.PI, true);
context.closePath();
context.fill();
}
time += 0.1;
}
</script>
</head>
<body>
<canvas id="canvas">你的浏览器不支持canvas,请跟换其他浏览器试一试</canvas>
</body>
</html>