html5之canvas的使用2-CSDN博客

本文链接：https://blog.csdn.net/qq359593234/article/details/84235198

canvas 的使用：

<!DOCTYPE html>
<html>
	<head>
<script type="text/javascript">

	function initialCanvas(){
			var canvas=document.getElementById('myCanvas');
			var context=canvas.getContext('2d');
			canvas.addEventListener("click",getCursorPosition,false);
			drawGrid(context);		
}

function drawCircle(x,y,context){
			context.beginPath();  
			context.arc(x,y,12.5,0,Math.PI*2,true);//前两个为，圆心座标（x,y）；第三四个为半径，？；第五个：为圆周率，
			context.closePath();
			context.strokeStyle="#000";//颜色方案
			context.stroke();//正式绘制
}

function drawGrid(context){
			context.beginPath();  
			context.arc(12.5,12.5,12.5,0,Math.PI*2,true);//前两个为，圆心座标（x,y）；第三四个为半径，？；第五个：为圆周率，  	
			for(var x = 0;x<=1000;x+=25){
				//边框横线
				context.moveTo(x,1); //起点？
				context.lineTo(x,1000);//终点？	
			}
			for(var y = 0;y<=1000;y+=25){
					//边框坚线
					context.moveTo(1,y); //起点？
					context.lineTo(1000,y);//终点？
			}
			context.closePath();
			context.strokeStyle="#EE0000";//颜色方案
			context.stroke();//正式绘制
}


function getCursorPosition(e){
	var canvas=document.getElementById('myCanvas');
	var context=canvas.getContext('2d');
	var i,k;//小圆的圆心位置（）
	var x,y,x1,y1;

	if(e.pageX || e.pageY){
		x = e.pageX;
		y = e.pageY;

		i=parseInt((x+24)/25);
		k=parseInt((y+24)/25);

		x1 = (i-1)*25+12.5;
		y1 = (k-1)*25+12.5;


		drawCircle(x1,y1,context);
	}	else{
	x= e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
	y= e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
		alert("else:"+x+"    "+y);
	}	
}
</script>
</head>

<body>

<table>

<tr><td>		
<canvas id="myCanvas" width="1000" height="1000">Your browser does not support the canvas tag.</canvas></td></tr>
<tr><td>
<input type="button" onclick="initialCanvas()" value="drawLine"/></td>
</tr>
</table>


</body>
</html>