canvas 实现鼠标画出矩形

 

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
<script>
var startX, startY;

var isdown=0
function mouseUp(e,d)
{
	isdown=0;
	var c=document.getElementById("myCanvas");
	height=c.style.height
	width=c.style.width
	var ctx=c.getContext("2d");
	ctx.clearRect(0,0,350,350);
	      
}
function mouseDown(e,d)
{
	down_id=e.id;
	startX = d.pageX;
	startY = d.pageY;
	isdown=1;
	console.log(startX+",,,,"+startY)
}

function mousemove(e){
	if(isdown){
		//console.log(e.pageX+","+e.pageY)
		// 更新 box 尺寸
		//ab.style.width = e.pageX - startX + 'px';
		//ab.style.height = e.pageY - startY + 'px';
		//获取页面中的canvas画布容器，通常为一个div
		var c=document.getElementById("myCanvas");
		height=c.style.height
		width=c.style.width
		var ctx=c.getContext("2d");
		ctx.lineWidth=1;
		ctx.clearRect(0,0,350,350);

		ctx.beginPath();
		ctx.moveTo(startX,startY);
		ctx.lineTo(e.pageX,startY);//shang heng
		ctx.lineTo(e.pageX,e.pageY);//you
		ctx.lineTo(startX,e.pageY);//zuo
		ctx.closePath();
		ctx.stroke();
	}
}
</script>
</head>
<body onmouseup="mouseUp(this,event)" onmousemove="mousemove(event)" onmousedown='mouseDown(this,event)'>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>


</body>
</html>

　　

posted @ 2018-11-02 01:41  anobscureretreat  阅读(1686)  评论(0)    收藏  举报