106 lines
1.9 KiB
HTML
106 lines
1.9 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html xmlns="http://www.w3c.org/1999/xhtml">
|
||
|
|
<head>
|
||
|
|
<title>CanvasDraw :: Lines</title>
|
||
|
|
<style type='text/css'>
|
||
|
|
* {
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
canvas {
|
||
|
|
position:absolute;
|
||
|
|
top:50%;
|
||
|
|
left:50%;
|
||
|
|
margin-top:-200px;
|
||
|
|
margin-left:-320px;
|
||
|
|
border:1px solid #000;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script type='text/javascript'>
|
||
|
|
click=false
|
||
|
|
coor=false
|
||
|
|
|
||
|
|
function getwh() {
|
||
|
|
if (self.innerHeight) {
|
||
|
|
h=self.innerHeight
|
||
|
|
w=self.innerWidth
|
||
|
|
}
|
||
|
|
else if (document.documentElement && document.documentElement.clientHeight) {
|
||
|
|
h=document.documentElement.clientHeight
|
||
|
|
w=document.documentElement.clientHeight
|
||
|
|
}
|
||
|
|
else if (document.body) {
|
||
|
|
h=document.body.clientHeight
|
||
|
|
w=document.body.clientWidth
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function ld(num,d) {
|
||
|
|
if (d==0) num=Math.floor(num/10)
|
||
|
|
else num=Math.ceil(num/10)
|
||
|
|
return num
|
||
|
|
}
|
||
|
|
|
||
|
|
function load() {
|
||
|
|
l=new Array()
|
||
|
|
ctx=document.getElementById('canvas').getContext('2d')
|
||
|
|
}
|
||
|
|
|
||
|
|
function mm(e) {
|
||
|
|
getwh()
|
||
|
|
x=Math.floor(e.pageX-(w-642)/2-2)
|
||
|
|
y=Math.floor(e.pageY-(h-402)/2-2)
|
||
|
|
|
||
|
|
if (click) {
|
||
|
|
ctx.clearRect(0,0,640,400)
|
||
|
|
ctx.beginPath()
|
||
|
|
for (var i=0;i<l.length;i++) {
|
||
|
|
ctx.moveTo(l[i][0][0],l[i][0][1])
|
||
|
|
ctx.lineTo(l[i][1][0],l[i][1][1])
|
||
|
|
}
|
||
|
|
ctx.moveTo(ox,oy)
|
||
|
|
ctx.lineTo(x,y)
|
||
|
|
ctx.stroke()
|
||
|
|
}
|
||
|
|
coor=true
|
||
|
|
}
|
||
|
|
|
||
|
|
function mc() {
|
||
|
|
if (coor) {
|
||
|
|
if (click) {
|
||
|
|
if (ld(x,0)==ld(sx,0) && ld(y,0)==ld(sy,0) || ld(x,1)==ld(sx,1) && ld(y,1)==ld(sy,1)) {
|
||
|
|
click=false
|
||
|
|
l[l.length]=[[ox,oy],[sx,sy]]
|
||
|
|
|
||
|
|
ctx.clearRect(0,0,640,400)
|
||
|
|
ctx.beginPath()
|
||
|
|
for (var i=0;i<l.length;i++) {
|
||
|
|
ctx.moveTo(l[i][0][0],l[i][0][1])
|
||
|
|
ctx.lineTo(l[i][1][0],l[i][1][1])
|
||
|
|
}
|
||
|
|
ctx.stroke()
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
else l[l.length]=[[ox,oy],[x,y]]
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
sx=x
|
||
|
|
sy=y
|
||
|
|
click=true
|
||
|
|
}
|
||
|
|
ox=x
|
||
|
|
oy=y
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload=load
|
||
|
|
document.onmousemove=mm
|
||
|
|
document.onclick=mc
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id='canvas' width='640' height='400'></canvas>
|
||
|
|
</body>
|
||
|
|
</html>
|