JS 之使用图形Canvas

最新推荐文章于 2023-07-02 15:46:19 发布

Modify_QmQ

最新推荐文章于 2023-07-02 15:46:19 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/qq_44973159/article/details/102660408

版权

一、定义画布，直接在body里面定义canvas标签
canvas标签的属性有 id width height style

<canvas id="canvas1" width="800px" height="600px" 
			style="border: 1px solid red;">	
</canvas>

二、创建对象，即访问画布元素

<script>
		var c = document.getElementById("canvas1");
		var ctx = c.getContext("2d");
	</script>

三、使用形状样式

方法名	描述
Rect(x,y,w,h)	创建矩形，默认选取画布颜色作为轮廓线色，不可见，要通过使用stroke()方法提供轮廓颜色
fillRect(x,y,w,h)	创建指定颜色填充的矩形，默认色是黑色
strokeRect(x,y,w,h)	指定线条颜色绘制矩形，默认是黑色，相当于Rect()+storke()
clearRect(x,y,w,h)	清除矩形一部分

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画布</title>
	</head>
	<body>
		<canvas id="canvas1" width="800px" height="600px" 
					style="border: 1px solid red;">
		</canvas>
		<script>
			var c = document.getElementById("canvas1");
			var ctx = c.getContext("2d");
			
			ctx.rect(50, 30, 100, 120);
			ctx.stroke();
			
			ctx.fillStyle="aqua"
			ctx.fillRect(20, 50, 40, 60);
			
			ctx.strokeStyle="blue";  //形状轮廓颜色
			ctx.strokeRect(200,100,50,60);
			
			ctx.clearRect(20,20,100,100);
		</script>
	</body>
</html>

扩展：绘制出一个800*600，方格宽为20的正方形表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas1" width="800px" height="600px" 
				style="border: 1px solid black;">		
		</canvas>
		<script>
			var c = document.getElementById("canvas1");
			var ctx = c.getContext("2d");
			for(var i=0;i<800;i+=20){
				for(var j=0;j<=600;j+=20){
					ctx.rect(i, j, 20, 20);
				}
			}
			ctx.stroke();
		</script>
	</body>
</html>

四、使用颜色

方法名	描述
fillstyle=“color”	定义将用于填充的任何闭合形状的颜色，默认为黑色
strokeStyle()	轮廓线颜色
shadowColor	定义阴影

案例：

	ctx.fillStyle="aqua"
	ctx.filRect(20, 50, 40, 60);			

	ctx.strokeStyle="blue";  //形状轮廓颜色
	ctx.strokeRect(200,100,50,60);
	
	ctx.shadowBlur = 40; //模糊级别，number越大阴影越大
	ctx.shadowColor="chartreuse"
	ctx.fillStyle="darkgoldenrod"
	ctx.fillRect(200,200,60,80)