-
Notifications
You must be signed in to change notification settings - Fork 0
/
test03.html
66 lines (61 loc) · 1.77 KB
/
test03.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制直线</title>
</head>
<body>
<canvas id="canvas1" style="background:lightblue;" width="500" height="500"></canvas>
<canvas id="canvas2" style="background:lightblue;" width="500" height="500"></canvas>
<script>
function draw(id) {
let canvas = document.getElementById(id);
if (!canvas) {
return false;
}
let context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
let n = 0;
let dx = 150;
let dy = 150;
let s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
let x = Math.sin(0);
let y = Math.cos(0);
let dig = Math.PI / 15 * 11;
for (let i = 0; i < 30; i++) {
let x = Math.sin(i * dig);
let y = Math.cos(i * dig);
context.lineTo(dx + x * s, dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
draw('canvas1');
function drawLine(id) {
let canvas = document.getElementById(id);
if (!canvas) {
return false;
}
let context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.beginPath();
// context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
context.moveTo(100, 150);
context.lineTo(200, 200);
context.closePath();
context.moveTo(200, 150);
context.lineTo(250, 300);
context.fill();
context.stroke();
}
drawLine('canvas2');
</script>
</body>
</html>