canvas画笔


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="">
<meta name="description" content="">
<title>画布--碰撞</title>
<style type="text/css">
*{padding: 0;margin: 0;}
canvas{border: 1px solid #000;margin: 20px 0 0 20px;}
</style>

</head>
<body>
<canvas id="cvs" width="500" height="400"></canvas>
<button>画图</button>
<button>清除</button>
<button>重画</button>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
window.onload=function(){
var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
var width=cvs.offsetLeft;

//画图
$("button").eq(0).click(function(){
cvs.onmousedown=function(e){
var e=e||event;
var x=e.clientX-width;
var y=e.clientY-width;
//console.log(x,y)
ctx.beginPath();
ctx.moveTo(x,y)
cvs.onmousemove=function(e){
var e=e||event;
var x1=e.clientX-width;
var y1=e.clientY-width;
//console.log(x1,y1)
ctx.lineTo(x1,y1)
ctx.lineWidth=5;
ctx.strokeStyle="#f00";
ctx.stroke();
}
}
cvs.onmouseup=function(){
//cvs.onmousedown=null;
cvs.onmousemove=null;
}
})
//清除画图
$("button").eq(1).click(function(){
cvs.onmousedown=function(e){
var e=e||event;
var x=e.clientX-width;
var y=e.clientY-width;
ctx.clearRect(x,y,20,20)
cvs.onmousemove=function(e){
var e=e||event;
var x1=e.clientX-width;
var y1=e.clientY-width;

ctx.clearRect(x1,y1,20,20)
}
}
cvs.onmouseup=function(){
cvs.onmousemove=null;
}
})
//重新画图
$("button").eq(2).click(function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
})


}

</script>
</html>

posted @ 2016-11-03 18:05  T-tao  阅读(101)  评论(0)    收藏  举报