利用html5画图

最新推荐文章于 2018-09-22 13:46:30 发布

wudiisss

最新推荐文章于 2018-09-22 13:46:30 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： function html border c

本文链接：https://blog.youkuaiyun.com/gsw66/article/details/8027854

html5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何利用HTML5的Canvas元素实现基本的鼠标绘制功能。通过监听鼠标事件，可以在Canvas上绘制线条，并提供了清除画布的功能。文章包含了完整的JavaScript代码示例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> canvas </title>
  
 
 </head>


 <body>
	<script type="text/javascript">
	
	var localx ;
	var localy;
	var mousestate=0;
	function draw(ev)
	{
		mousestate =1;
		localx = ev.clientX;
		localy = ev.clientY;
	
	}

	function mouseup()
	{
		
		mousestate = 0;
	}

	function movedraw(ev)
	{
		
		if(mousestate==1 )
		{
			
			
			var localx2 = ev.clientX;
			var localy2 = ev.clientY;

			//alert("SF");
/*			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			cxt.moveTo(10,10);
			cxt.lineTo(150,50);
			cxt.lineTo(10,50);

			cxt.stroke();


*/

			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			cxt.moveTo(localx,localy);
			cxt.lineTo(localx2,localy2);
		
			cxt.stroke();

/*
			var canvas=document.getElementById('myCanvas');
			var ctx=canvas.getContext('2d');
			ctx.fillStyle='#FF0000';
			ctx.fillRect(localx,localy,localx2,localy2);

*/
			localx = ev.clientX;
			localy = ev.clientY;
		}

	}

	function cnvs_clearCoordinates()
	{	
		mousestate = 0;
		document.getElementById("xycoordinates").innerHTML="";
	}

	function clearCanvas()
	{
		var c=document.getElementById("myCanvas");
		c.height=c.height;
	}


	</script>
	<canvas id="myCanvas"  onmousedown="draw(event)"  onmouseup="mouseup()"  onmousemove="movedraw(event)"		width=800 height=600  margin-top =0px;margin-left=0px onmouseout="cnvs_clearCoordinates()" 
		style="border:1px solid #c3c3c3;"
	>
	</canvas>	

	<button onclick="clearCanvas()">清空画布</button>
 </body>
</html>