通过一段时间学习canvas，做了一个小的练习效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*清除浏览器的默认效果*/
*{
margin:0 ;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
body{
background: pink;
}
#test{
background: white;
position: absolute;
left:0 ;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<canvas id="test" width="500" height="500">
</canvas>
<script type="text/javascript" >{
var canvas = document.getElementById('test')
var ctx = canvas.getContext("2d")
canvas.onmousedown =function(event){ //绑定鼠标按下的事件
event = event ||window.event
if(canvas.setCaptrue){
canvas.setCaptrue()
}
ctx.save()
ctx.beginPath()
ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop)
document.onmousemove = function(event){ //绑定鼠标移动事件
event = event ||event
ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop)
ctx.stroke()
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup =null
if(document.releaseCapture){
document.releaseCapture()
}
}
ctx.restore()
return false;
}
}
</script>
</body>
</html>
效果如下
