展示canvas坐标

最新推荐文章于 2024-03-13 21:27:06 发布

一扁舟

最新推荐文章于 2024-03-13 21:27:06 发布

阅读量1.7k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/a1_s2_c3_/article/details/90313535

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

获取鼠标的位置信息；

1 canvas—画布，
2获取canvas中鼠标的位置坐标。
e.clientX;
e.clientY;
3document.getElementById(id);//返回对拥有指定 ID 的第一个对象的引用。
4innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；
如：

这是内容

，
我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=‘这是被插入的内容’;

		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="UTF-8"> <!-- 设置编码格式-->
				<style type="text/css">  
					#mycanvas{
						border: 1px solid black;
						margin: 0px;
						padding: 0px;
					}
				</style>
		
			</head>
			<script type="text/javascript">
				function aa(e)//这是形参可以为任意。
				{
					var x = e.clientX;//获取坐标
					var y = e.clientY;
					document.getElementById("xy").innerHTML="坐标:("+x+","+y+")";
					//getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
					//innerHTML在JS是双向功能：获取对象的内容  或  向对象插入内容；  
		//				如：<div id="aa">这是内容</div> ，  
		//				我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；  
		//				也可以对某对象插入内容，如  document.getElementById('abc').innerHTML='这是被插入的内容';     
					
				}
				
				function bb(e)
				{
					document.getElementById("xy").innerHTML="";
				}
			</script>
			<body>	  <!--event是一个对象， 不能变-->
				<canvas onmousemove="aa(event)" onmouseout = "bb(event)" id ="mycanvas" width="1000" height="600">		</canvas>
				
				<p id="xy"></p>
			</body>
		</html>

画线；

		<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title></title>
			<style>
				#mycanvas{
					border: 1px solid black;
					margin: 0px;
					padding: 0px;
				}
			</style>
		</head>
		<script type="text/javascript">
		
			function a1()
			{
				var a = document.getElementById("mycanvas");
				var b = a.getContext("2d");
				b.fillStyle="aqua"//填充颜色；
				b.fillRect(20,20,100,80);
			}
			
			function a2()
			{
				var a = document.getElementById("mycanvas");
				var b = a.getContext("2d");
				//b.fillStyle=""
				b.beginPath();//如果我们想要绘制的这三条折线是不同颜色的时候，
				               //因为这里的第二条折线的strokeStyle属性会覆盖第一条折线的
				               //strokeStyle属性，而stroke()方法的执行会绘制当前所有的状态，
				               //所以第一条折线就变成绿色。同理，最终三条折线就都是蓝色。因此呢，
				               //这里就需要使用beginPath()方法来重新进行一次全新的绘制。
				b.moveTo(50,50);
				b.fillStyle="aqua";
				b.strokeStyle="aqua";//设置线条的颜色；
				b.lineCap="butt";//设置线条末端的样式，butt默认-平边缘， round圆形， square-方正形；
				b.lineWidth="10";//设置线条的粗细；
				b.lineTo(150,150);
				b.stroke();
				
				
				b.beginPath();
				b.moveTo(300,200);
				b.lineTo(500,400);//这是画折线；
				b.lineTo(300,600);
				b.stroke();
			}
			
			
		</script>
		<body  onload="a2()" >
			<canvas id="mycanvas" width="800" height="600" ></canvas>
		</body>
	</html>

1此时，如果我们想要绘制的这三条折线是不同颜色的，那该怎么办？一种常见的错误用法就是：

	context.moveTo(100,200);
	context.lineTo(300,400);
	context.lineTo(100,600);
	context.lineWidth = 8;
	context.strokeStyle = "red";
	context.stroke();//绘制
	
	context.moveTo(300,200);
	context.lineTo(500,400);
	context.lineTo(300,600);
	context.lineWidth = 8;
	context.strokeStyle = "green";
	context.stroke();//绘制
	
	context.moveTo(500,200);
	context.lineTo(700,400);
	context.lineTo(500,600);
	context.lineWidth = 8;
	context.strokeStyle = "blue";
	context.stroke();//绘制

运行结果会是三条折线都是蓝色的。因为这里的第二条折线的strokeStyle属性会覆盖第一条折线的strokeStyle属性，而stroke()方法的执行会绘制当前所有的状态，所以第一条折线就变成绿色。同理，最终三条折线就都是蓝色。因此呢，这里就需要使用beginPath()方法来重新进行一次全新的绘制。正确方法见上例。

2接下来我们介绍一下填充属性fillStyle和填充绘制方法fill()：

	context.beginPath();
	context.moveTo(100,100);
	context.lineTo(500,100);
	context.lineTo(500,500);
	context.lineTo(100,500);
	context.closePath();
	context.lineWidth = 8;
	context.strokeStyle = "#333";
	context.stroke();
	context.fillStyle = "red";   //填充颜色
	context.fill(); //填充

在这里插入图片描述
可以看到图形的边框宽度比没有填充颜色的图形的边框宽度小，这是因为我们先绘制边框，再填充颜色。而实际上应该是先填充颜色，再绘制边框。而且fill()方法和stroke()方法的原理是一样的，都是基于当前状态进行绘制。所以，为了可读性，我们可以将属性设置放在一起，最后在使用fill()和stroke()方法：

		context.beginPath();
		context.moveTo(100,100);
		context.lineTo(500,100);
		context.lineTo(500,500);
		context.lineTo(100,500);
		context.closePath();
		context.lineWidth = 8;
		context.strokeStyle = "#333";
		context.fillStyle = "red";
		
		context.fill(); //先填充
		context.stroke(); //再绘制边框

3lineCap属性就是定义线段开头和结尾处的形状，此属性有三个属性值：butt（默认值），round，square 。

在这里插入图片描述

4最后还有两个线条的属性：lineJoin 和 miterLimit

lineJoin顾名思义就是线条与线条之间的连接方式，该属性有三个属性值：miter（默认值，尖角），bevel（衔接），round（圆角）。还有一个miterLimit属性，这个属性只有当lineJoin属性值是miter时才有用，默认值是10 。

画圆

		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="UTF-8">
				<title></title>
				
				<style>
						#mycanvas{
							border: 1px solid black;
							margin: 0px;
							padding: 0px;
						}
					</style>
					
			</head>
			
			<script type="text/javascript">
			
				function a()
						{
							var c =  document.getElementById("mycanvas");
							var tex = c.getContext("2d");
							tex.beginPath();
							
							//tex.fill="aqua";
							tex.arc(200,200,151,0,2*Math.PI);//arc(x,y,r,start,end)中心坐标，半径，起始角，结束角；
							tex.strokeStyle="aqua";//圆形外面框框颜色
							tex.fill();//
							tex.fillStyle="chartreuse";
							tex.stroke();
						}
						
					function a1()
					{
						var a = document.getElementById("mycanvas");
						var b = a.getContext("2d");
						b.fillStyle="aqua"//填充颜色；
						b.fillRect(20,20,100,80);
						for(var i = 0; i <= 10; ++i)
						{
							b.beginPath();
							b.arc(i*25, i*25, i*10, 0, 2*Math.PI,true);
							b.closePath();
							b.fillStyle="rgba(255,0,0,0.25)";
							b.fill();
						}
					}
			</script>
				
			<body onload="a1()">
				
				
				<canvas height="800" width="1000" id="mycanvas">
					
				</canvas>
			</body>
			
		</html>

前三个值（红绿蓝）的范围为0到255之间的整数或者0%到100%之间的百分数。这些值描述了红绿蓝三原色在预期色彩中的量。
第四个值，alpha值，制订了色彩的透明度/不透明度，它的范围为0.0到1.0之间，0.5为半透明。

rgba(255,255,255,0)则表示完全透明的白色；
rgba(0,0,0,1)则表示完全不透明的黑色；
rgba(0,0,0,0)则表示完全不透明的白色,也即是无色；

一扁舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
展示canvas坐标

1 canvas—画布，2获取canvas中鼠标的位置坐标。e.clientX;e.clientY;3document.getElementById(id);//返回对拥有指定 ID 的第一个对象的引用。4innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；如：这是内容，我们可以通过 document.getElementById(‘aa’).innerH...
复制链接

扫一扫