<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>你画我猜</title>
<style>
body{
width: 100%;
height: 100%;
background: black;
}
#canvas{
background:#ffffff;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
</canvas>
<script>
var oC=document.getElementById("canvas")
var oGC=oC.getContext("2d")
oC.onmousedown=function(e){
//获取当前点的位置
var disX=e.clientX-oC.offsetLeft
var disY=e.clientY-oC.offsetTop
oGC.moveTo(disX,disY)
document.onmousemove=function(e){
//获取第二点的位置
var disX=e.clientX-oC.offsetLeft
var disY=e.clientY-oC.offsetTop
oGC.lineTo(disX,disY)
oGC.stroke()
}
document.onmouseup=function(){
document.onmousedown=null
document.onmousemove=null
}
}
</script>
</body>
</html>