-
Notifications
You must be signed in to change notification settings - Fork 0
/
canvas_lab.html
82 lines (71 loc) · 1.6 KB
/
canvas_lab.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
<html>
<head>
<title>bs lab</title>
</head>
<body onload=initialise()>
<h1>Canvas Lab</h1>
<br />
<table style="float:left">
<tr>
<td><button>Option</button></td>
</tr>
<tr>
<td><button>Option</button></td>
</tr>
<tr>
<td><button>Option</button></td>
</tr>
</table>
<canvas width="750" height="600" id="canvas" style="border:1px solid #000000;" style="float:left">
</canvas>
<div style="clear:both"></div>
<script>
function initialise(){
window.canvas=document.getElementById("canvas");
window.canvas.addEventListener("mousedown",doMouseUp,false);
window.pos1=0;
window.pos2=0;
}
function doMouseDown1(event){
canvas_x=event.pageX;
canvas_y=event.pageY;
var ctx= window.canvas.getContext('2d');
if(pos1==0)
{
pos1=[canvas_x-58, canvas_y-8]
}
else
{
ctx.moveTo(pos1[0],pos1[1]);
ctx.lineTo(canvas_x-58,canvas_y-8);
ctx.stroke();
pos1[0]=canvas_x-58;
pos1[1]=canvas_y-8;
}
//alert("X="+canvas_x+", Y="+canvas_y);
}
function doMouseUp(event){
canvas_x=event.pageX;
canvas_y=event.pageY;
var ctx= window.canvas.getContext('2d');
ctx.beginPath();
ctx.arc(canvas_x-75, canvas_y-85, 5, 0, 2 * Math.PI, false)
ctx.stroke();
}
</script>
<!---58 and 8-->
<!--some random bullshit code here.
Canvas?
graph?
var x=document.getElementById('canvas');
var ctx=x.getContext('2d')
ctx.moveTo(point,point)
ctx.lineTo(endp,endp)
ctx.stroke() (draws line)
Clearing the canvas: x.width=x.width;
context.strokeStyle="#000"; changes it to black
-->
<canvas id='canvas' width="200" height="100" style="border:1px solid #00000000">
</canvas>
</body>
</html>