小白第一步|html5+canvas实现简单绘图

最新推荐文章于 2025-06-15 16:48:22 发布

原创最新推荐文章于 2025-06-15 16:48:22 发布 · 763 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #canvas #画图

Java 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素实现绘画功能，包括直线、3/4圆及圆角矩形的绘制。文章详细讲解了Canvas的使用流程，如获取DOM对象、设置监听器、使用CanvasRenderingContext2D对象绘图等。

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

本菜鸡又学了新东西！！！开心！！！！！！

于是我决定：第一时间写个博客记(xu)录(rong)一下

在这里插入图片描述

下面开始正文

预备知识：html5编程（这里不再赘述）

我们如果想要实现绘画功能，有几部分不可缺少：
监听器，画布（类似java的graphics类），图像类（类似java的JFrame）

图像类使用html5中的canvas标签
画布的建立必须经过如下步骤

1、获取canvas的DOM对象，这是一个Canvas对象。
2、调用该DOM对象的 getContext() 方法，该方法返回一个对应的 CanvasRenderingContext2D 对象，通过这个对象可以进行图像的绘制 （可以按JFrame与Graphics的关系理解，但有实质性不同）。
3、调用CanvasRenderingContext2D对象的方法绘图。
代码如下（在body中）

<!--创建使用区域,其中onClick用于设置鼠标点击事件-->
	<canvas width="1200px" height="1000px" id="haha" onClick="clicked()"></canvas>
	<!--使用script创建脚本画布-->
	<script type="text/javascript">
	
		//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
		//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
		//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
		var canvas = document.getElementById("haha")
		//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
		var c = canvas.getContext("2d");
	</script>

监听器（这里监听的是点击事件）可以有两种办法：
1、使用canvas标签中的onClick属性

	<!--创建使用区域,其中onClick用于设置鼠标点击事件-->
	<canvas width="1200px" height="1000px" id="haha" onClick="clicked()"></canvas>

2、在script中定义事件函数

<!--使用script创建脚本画布-->
<script type="text/javascript">
var canvas = document.getElementById("haha")
		//然后定义事件函数
		canvas.addEventListener('click',clicked(){
								//函数内容
								});
</script>

这样我们就可以集齐画图所需条件，开始画图啦！

我们在这里上手几个形状（直线，3/4圆，圆角矩形）

在CanvasRenderingContext2D中，我们画图的方法略有不同，都需要进行以下几步
1、路径开始（beginPath()）
2、路径操作
3、路径结束（endPath()）
对应代码为

	//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
	//路径开始
	c.beginPath();
	//路径操作
	......
	//路径结束
	c.endPath();

如果想要改变路径和填充的颜色与风格，CanvasRenderingContext2D的fill与stroke满足你
对应代码为

	//设置填充风格
	c.fillStyle = "#00ffff";
	//设置路径风格
	c.strokeStyle = "#ff00ff";
	//fill函数进行填充
	c.fill();
	//stroke函数绘制已定义的路径
	c.stroke();

通过这种语句，我们明确的标示出画图路径的开始与结束
下面分别绘制直线，3/4圆与圆角矩形，代码如下，注释详细

1、直线
通过鼠标点击两次，我们实现第一次是起点，第二次是终点，并可以重复使用的目的

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title></title>

</head>
<body>
	<!--创建使用区域,其中onClick用于设置鼠标点击事件-->
	<canvas width="1200px" height="1000px" id="haha" onClick="clicked()"></canvas>
	<!--使用script创建脚本画布-->
	<script type="text/javascript">
		//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
		//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
		//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
		var canvas = document.getElementById("haha")
		//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
		var c = canvas.getContext("2d");
		
		//然后进行元素的加入
		//首先我们确定风格
		//设置路径风格
		c.strokeStyle = "#ff00ff";
		//然后设置鼠标点击事件
		//在这里设置事件函数，并将其与canvas本身的onClick联系起来就可以实现鼠标点击事件的功能
		//我们设置一个功能，即点击两个点可以产生这两个点之间的连线
		//首先创建一个变量存储点的性质：奇数为起点，偶数为终点
		var count = 1;
		function clicked(){
			//event.x与event.y语句可以返回当前点击位置的(x,y)坐标
			//如果count为奇数，取点，将其设置成起点
			if(count % 2 == 1){
				var x = event.x;
				var y = event.y;
				//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
				//路径开始
				c.beginPath();
				//moveTo函数将路径移动到当前点
				c.moveTo(x,y);
			}
			//如果count为偶数，取点，将其设置成终点
			if(count % 2 == 0){
				var x = event.x;
				var y = event.y;
				//画线！
				c.lineTo(x,y);
				//路径终止
				c.closePath();
			}
			//stroke函数绘制已定义的路径
			c.stroke();
			//计数器增加
			count++;
		}
		
	</script>
	
</body>
</html>

效果：
在这里插入图片描述
2、3/4圆
每次点击鼠标时画出一个3/4圆

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title></title>

</head>
<body>
	<!--创建使用区域,其中onmouseup用于设置鼠标松开事件-->
	<canvas width="1200px" height="1000px" id="haha" onmouseup="clicked()"></canvas>
	<!--使用script创建脚本画布-->
	<script type="text/javascript">
		//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
		//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
		//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
		var canvas = document.getElementById("haha")
		//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
		var c = canvas.getContext("2d");
		
		//然后进行元素的加入
		//首先我们确定风格
		//设置路径风格
		c.fillStyle = "#00ffff";
		c.strokeStyle = "#ff00ff";
		//然后设置鼠标松开事件
		function clicked(){
			//event.x与event.y语句可以返回当前点击位置的(x,y)坐标
				var x = event.x;
				var y = event.y;
				//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
				//路径开始
				c.beginPath();
				//路径画圆,arc(x,y,r,sAngle,eAngle,counterclockwise)用法：x为圆的中心的 x 坐标，y为圆的中心的 y 坐标，r为圆的半径sAngle为起始角，以弧度计（弧的圆形的三点钟位置是 0 度），eAngle为结束角，以弧度计，counterclockwise可选。规定应该逆时针还是顺时针绘图。false = 顺时针，true = 逆时针。
				c.arc(x,y,50,0,1.5*Math.PI,false);
				//路径终止
				c.closePath();
			//fill函数填充路径
			c.fill();
			//stroke函数绘制已定义的路径
			c.stroke();
		}
		
	</script>	
</body>
</html>

（附：arc方法模式图）
在这里插入图片描述
效果：

3、圆角矩形
画出一个圆角矩形

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title></title>

</head>
<body>
	<!--创建使用区域,其中onmouseup用于设置鼠标松开事件-->
	<canvas width="1200px" height="1000px" id="haha" onmouseup="clicked()"></canvas>
	<!--使用script创建脚本画布-->
	<script type="text/javascript">
		//在script脚本中相对脱离了之前的html5语言，因此可以使用//注释
		//注意：script语言中var代表变量，不分整型浮点型这样的差别，function代表函数
		//首先获取canvas元素对应的DOM对象,其中函数的参数对应canvas的id（相当于界面）
		var canvas = document.getElementById("haha")
		//然后获取在canvas上绘图的CanvasRenderingContext2D对象（相当于画布）
		var c = canvas.getContext("2d");
		
		//然后进行元素的加入
		//首先我们确定风格
		//设置路径风格
		c.strokeStyle = "#ff00ff";
		//然后设置鼠标松开事件
		function clicked(){
			//event.x与event.y语句可以返回当前点击位置的(x,y)坐标
				var x = event.x;
				var y = event.y;
				var	r = 50;
				var width = 200;
				var height = 100;
				//canvasRenderingContext2D中，需要使用beginPath与closePath来标定路径的起始与终止
				//路径开始
				c.beginPath();
				//moveTo函数将路径移动到当前点
				// 移动到左上角非圆弧处
				c.moveTo(x+r,y);
				// 添加一条连接到右上角的线段
				c.lineTo(x+width-r, y);
				// 添加一段圆弧,arcTo(x1,y1,x2,y2,radius)，变量：从当前(moveTo)点到(x1,y1)有一条线，从(x1,y1)到(x2,y2)有一条线，这个圆弧是与这两条线相切，半径为radius的圆的一部分
				c.arcTo(x + width , y, x + width, y + r, r);
				// 添加一条连接到右下角的线段
				c.lineTo(x + width, y + height - r);
				// 添加一段圆弧，方法同上
				c.arcTo(x + width, y + height , x + width - r, y + height , r);
				// 添加一条连接到左下角的线段
				c.lineTo(x + r, y + height); 
				// 添加一段圆弧，方法同上
				c.arcTo(x, y + height , x , y + height - r , r);
				// 添加一条连接到左上角的线段
				c.lineTo(x , y + r);
				// 添加一段圆弧，方法同上
				c.arcTo(x , y , x + r , y , r);
				//路径终止
				c.closePath();
			//stroke函数绘制已定义的路径
			c.stroke();
		}
	</script>
</body>
</html>