html5之canvas的使用2

最新推荐文章于 2024-05-01 23:43:22 发布

咖啡机

最新推荐文章于 2024-05-01 23:43:22 发布

阅读量75

点赞数

分类专栏： html 文章标签： canvas html5

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

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

咖啡机

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5之canvas的使用2

canvas 的使用：[code="html"] function initialCanvas(){ var canvas=document.getElementById('myCanvas'); var context=canvas.getContext('2d'); canvas.addEventListener("click",ge...
复制链接

扫一扫