-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
73 lines (65 loc) · 2.57 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="beef" width="500" height="375"></canvas>
<canvas id="d" width="300" height="225"></canvas>
<script type="text/javascript">
function draw_b() {
var b_canvas = document.getElementById("beef");
var context = b_canvas.getContext("2d");
for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x,0);
context.lineTo(x,375);
};
for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0,y);
context.lineTo(500,y);
};
context.strokeStyle = "#eee";
context.stroke();
context.beginPath();
context.moveTo(0,40);
context.lineTo(240,40);
context.moveTo(260,40);
context.lineTo(500,40);
context.moveTo(495,35);
context.lineTo(500,40);
context.lineTo(495,45);
context.moveTo(60,0);
context.lineTo(60,153);
context.moveTo(60,173);
context.lineTo(60,375);
context.moveTo(65,370);
context.lineTo(60,375);
context.lineTo(55,370);
context.strokeStyle = "#000";
context.stroke();
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);
context.textBaseline = "top";
context.fillText("(0,0)", 8,5);
context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("(500,375)",492,370);
context.fillRect(0,0,3,3);
context.fillRect(497,372,3,3);
};
//draw_b();
function draw_c() {
var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");
var my_grad = context.createLinearGradient(0,0,300,0);
my_grad.addColorStop(0,"black");
my_grad.addColorStop(1,"green");
//my_grad.addColorStop(2,"blue");
context.fillStyle = my_grad;
context.fillRect(0,0,300,225);
};
draw_b();
draw_c();
</script>
</body>
</html>