HTML5中的canvas-优快云博客

本文链接：https://blog.youkuaiyun.com/ccoo233/article/details/82700095

本文详细介绍HTML5 Canvas元素的基本用法，包括矩形、圆形和三角形的绘制技巧。通过实例代码，读者可以学习如何使用fillRect、strokeRect、arc、moveTo和lineTo等方法来创建各种图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。

1.绘制矩形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				width: 100%;
				height: 100%;
				background: black;
				
			}
			#canvas{
				background: #fff;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="400" height="400">我是一个画布</canvas>
		
		
		<script type="text/javascript">
			var oc=document.getElementById("canvas")
			var ogc=oc.getContext("2d")
			
             
			ogc.fillRect(50,50,100,100)
			
			ogc.strokeRect(150,50,100,100)
			
			ogc.fillStyle="red"
			ogc.fillRect(250,50,100,100)
			
			ogc.strokeStyle="red"
			ogc.strokeRect(50,150,100,100)

		</script>
	</body>
	
</html>

getContext()	获取绘图环境，可选参数"2d"
fillRect(x,y,width,height)	绘制一个填充的矩形
strokeRect(x,y,width,height)	绘制一个矩形的边框
clearRect(x,y,width,height)	清除指定矩形区域。

fillStyle	填充背景颜色
strokeStyle	设置边框颜色
lineWidth	设置边框的宽度

“2d”为2D环境

2.绘制圆形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		body{
			width: 100%;
			height: 100%;
			background: black;
			
		}
		canvas{
			background: white;
		}
	</style>
	<body>
		<canvas id="canvas" width="500px" height="500px">
			
		</canvas>
		<script type="text/javascript">
			var oc=document.getElementById("canvas")
			var ogc=oc.getContext("2d")
			
			ogc.arc(100,100,50,0,360*Math.PI/180,true)
			ogc.stroke()
			
			//左眼
			ogc.beginPath()
			ogc.arc(80,80,10,0,360*Math.PI/180,true)
			ogc.stroke()
			ogc.closePath()
			
			//右眼
			ogc.beginPath()
			ogc.arc(120,80,10,0,360*Math.PI/180,true)
			ogc.stroke()
			ogc.closePath()
			
			//鼻子
			ogc.beginPath()
			ogc.arc(100,100,15,0,360*Math.PI/180,true)
			ogc.stroke()
			ogc.closePath()
			
			//嘴巴
			ogc.beginPath()
			ogc.arc(100,120,20,0,180*Math.PI/180,false)
			ogc.stroke()
			ogc.closePath()
		</script>
	</body>
</html>

这里我绘制了一个笑脸。

绘制圆形，canvas提供了arc这个方法，这个方法需要六个参数

atc（x轴，y轴，园的半径，开始角度，结束角度，顺时针或逆时针）

3.绘制三角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
			body{
				width: 100%;
				height: 100%;
				background: black;
				
			}
			#canvas{
				background: #fff;
			}
		</style>
	<body>
		<canvas id="canvas" width="500" height="500"></canvas>
		
		<script type="text/javascript">
			var oc=document.getElementById("canvas")
			var ogc=oc.getContext("2d")
			
			ogc.beginPath()
			ogc.moveTo(100,100)
			ogc.lineTo(200,200)
			ogc.lineTo(100,200)
			ogc.closePath()
			ogc.stroke()
		</script>
	</body>
</html>

绘制直线原理和三角一样

moveTo(x,y)	不绘制，只是将当前位置移动到新的目标点
lineTo(x,y)	不仅将当前位置移动到新的目标点(x,y)，而且在两个坐标之间画一条直线。

move To是起始点只能有一个。

beginPath() 方法开始一条路径，或重置当前的路径。(开始路径)。

closePath() 方法创建从当前点到开始点的路径。(结束或闭合路径)。

每绘画一个图形要加上beginPath()和closePath()。

stroke()放在closePath()前的话会导致图形没有闭合(最后一条线不会连接)。

stroke()放在closePath()后的话图形最后一条线先连接后闭合。