• 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>
    

      

  • 相关阅读:
    第八周作业。
    作业。
    第七周作业。
    作业。
    Android简易计算器
    Android第四周
    java6.12
    java5.29
    java5.28
    java5.22
  • 原文地址:https://www.cnblogs.com/sea-stream/p/9893637.html
Copyright © 2020-2023  润新知