为了让师妹20分钟学会canvas，我熬夜苦肝本文外加一个小项目❤️建议收藏❤️

Posted 2021-09-07 孤寒者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为了让师妹20分钟学会canvas，我熬夜苦肝本文外加一个小项目❤️建议收藏❤️相关的知识，希望对你有一定的参考价值。

🎍0、前言

🎅🎅前几天小师妹突然火急火燎的的给我打电话说她在校招面试前端的时候，多次被提问到canvas,但是她却不会，希望我能给她速成一下！可见canvas在前端的地已经越来越重要了!🎅🎅
🔆🔆所以我特地熬夜写了本文，就为了让大家能快速掌握canvas（我的心里只有你们，没有小师妹）~🔆🔆
👙👙我会尽量把技术文写的通俗易懂/生动有趣，保证每一个想要学习知识&&认认真真读完本文的读者们能够有所获，有所得。当然，如果你读完感觉本文写的还可以，真正学习到了东西，希望给我个「赞」和「收藏」，这个对我很重要，谢谢了！👙👙

重点来啦！重点来啦！！ 💗💗💗 下面就让我们一同走入canvas的神奇世界！

👝1.初级阶段——师傅领进门~

🎣（1）canvas是什么？

我们翻译一下这个单词，会发现它有「画布」的意思。画布画布不就是绘制图形的么？不过不同的是canvas元素是在网页上绘制图形！

其实canvas 元素就是使用 javascript 在网页上绘制图像。而绘制的画布区域是一个矩形区域，我们可以控制其中每一像素，以达到想画啥就画啥的效果。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

🍶（2）如何使用？

上面说canvas 元素就是使用 JavaScript 在网页上绘制图像！所以关于canvas的使用也分为两步：

第一步：在html5页面创建canvas元素；

第二步：通过JavaScript来绘制。

1️⃣创建 Canvas 元素：

向 HTML5 页面添加 canvas 元素!
规定此canvas元素的 id、宽度和高度（宽度和高度即指定画布的大小！）：

<!--canvas默认大小：宽300px，高150px-->
<canvas id="myCanvas" width="200" height="100"></canvas>

2️⃣通过 JavaScript 来绘制：

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内完成：

<script type="text/javascript">
	//第一步，匹配到canvas对象。
	var c=document.getElementById("myCanvas");
	//第二步，获取canvas的上下文环境 
	var cxt=c.getContext("2d");    //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
	
	// 绘制一个红色的矩形：
	cxt.fillStyle="red";
	// fillRect方法是绘制矩形    参数：绘制矩形的左上角x坐标，y坐标，x方向长度，y方向长度
	cxt.fillRect(0,0,150,75);	// 在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
</script>

3️⃣实现效果：

需要注意的是：canvas的画布区域，左上角为坐标原点(0,0)，分别向右为x轴，向下为y轴。

🚧2.中级阶段——绘制一些常见的基本图形~

要知道，再复杂的图形也都是由各种基本图形组合而成。
所以，先来看看如何绘制各种常见的基本图形。
这样，进行一些需要使用canvas的项目设计时才会手到擒来！

🚓（1）绘制一条直线

指定起始(x,y)坐标；
指定粗细；
指定颜色。

注意：通过CSS定位到canvas元素，并为其设置一个显眼的border样式，方便下面观察！

1️⃣上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		  /*设置canvas画布样式——画布边框粗细1px；实线；红色*/
			#myCanvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="250"></canvas>
	</body>
	<script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		
		// 1.首先，将画笔定位到起点坐标处；
		ctx.moveTo(50,50);
		// 2.然后，从当前位置连一条线到终点坐标处（注意：此时并没有真正的画线！)
		ctx.lineTo(100,50);
		ctx.strokeStyle = "blue";    // 线条的颜色
		ctx.lineWidth = "5";	     // 线条的粗细
		// 3.最后，画线条，作用是描边————这句才是真正的画线！
		ctx.stroke();		   	     // 认真学习的同学可以将本行注释再看看效果哦！
		
</script>
</html>

2️⃣实现效果：

🚑（2）绘制一条折线

指定折点处的形状；
指定线端点的形状。

1️⃣上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#myCanvas{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="300" height="250"></canvas>
	</body>
	<script type="text/javascript">
		var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		
		// 1.首先，将画笔定位到起点坐标处
		ctx.moveTo(50,50);
		// 2.然后，从当前位置连一条线到重点坐标处【因为现在画的是折线，所以拐两拐】（注意：并不是真画线！)
		ctx.lineTo(100,50);
		ctx.lineTo(60,80);
		
		// 3.指定线段端点形状  ———— round:圆形；square:正方形；butt:默认
		ctx.lineCap = "round";  	
		  
		// 4.指定线交点（折线点）的形状 ———— round:圆形；miter：默认；bevel:截取一部分；
		ctx.lineJoin = "round";   
		
		ctx.strokeStyle = "blue";  // 线条的颜色
		ctx.lineWidth = "5";	   // 线条的粗细
		
		// 5.最后，画线条，作用是描边————这句才是真正的画线！
		ctx.stroke();			  
		
</script>
</html>

认真学习的小伙伴们可以尝试将lineCap和lineJoin的值多次更改，看看各种值的真实实现效果哦！

2️⃣实现效果：

🚔（3）画矩形和圆

分别尝试画实心和空心！

同一张画图上绘制多个图形小知识点：

在同一个canvas上，即同一张画布上画图时，画笔的位置为画笔画完上一个图的结束点！

问题就是重新定位画笔过于麻烦！

解决方法——所以在一个图画完后使用.stroke()方法绘制出此图；并使用方法.beginPath()新开辟一次画图，重新定位画笔即可！

1️⃣上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>画方，画圆</title>
		
		<style type="text/css">
			#c1{
				border:1px solid blue;            
			}
		</style>
		
	</head>
	<body>
		<canvas id="c1" width="1300" height="700"></canvas>
	</body>
	
	<script type="text/javascript">
		var c = document.getElementById("c1");
		var ctx = c.getContext("2d");
		
		//1.绘制空心矩形
		ctx.strokeStyle = "blue";
		ctx.lineWidth = 5;					//线条粗细
		ctx.strokeRect(50,50,250,250);	//参数：左上角x,y坐标，x,y方向长度
		
		
		//2.绘制实心矩形
		ctx.fillStyle = "#DFFF4A";     // 指定填充颜色
		ctx.fillRect(350,50,100,100);
		
		
		//3.画一个既描边又填充的矩形
		//第一种方法：先画一个空心矩形，然后在其内部画一个实心矩形
		ctx.lineWidth = 20;
		ctx.strokeRect(500,50,100,100);
		ctx.fillRect(500,50,100,100);
		
		//第二种方法：.rect()方法先画一个空心矩形，然后.fill()填充
		ctx.rect(650,50,100,100);
		ctx.stroke();
		ctx.fill()
		
		
		//4.绘制填充的圆
		ctx.beginPath();
		ctx.lineWidth = 3;
		//参数：150,500是圆心，80是半径，0是弧的起始角度，  Math.PI/2是弧的结束角度， true是逆时针;false是顺时针。
		ctx.arc(150,500,80,0,Math.PI*2,true);
		ctx.stroke();
		ctx.fill();			// 注意：使用的填充样式都是上面设置过的！
		
		
		// 5.绘制空心的圆
		ctx.beginPath();
		ctx.lineWidth = 3;
		ctx.arc(400,500,80,0,Math.PI*2,true);
		ctx.stroke();

	</script>
</html>

2️⃣实现效果：

🚐（4）颜色渐变之线性渐变和发散渐变

渐变可以填充在矩形, 圆形, 线条, 文本等各种形状中，主要作用是：可以自己定义不同的颜色。

1️⃣上代码：

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>线性渐变和发散渐变</title>
		<style type="text/css">
			#c1{
				border: 3px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="c1" width="1000" height="700"></canvas>
	</body>
	
	<script type="text/javascript">
		//第一步，找到canvas对象。
		var c = document.getElementById("c1");
		//第二步，获取canvas的上下文环境
		var ctx = c.getContext("2d");
		
		//然后就可以通过ctx进行绘制了
		ctx.beginPath();
		
		// 线性渐变的实现
		//第一种： 竖着渐变，从指定的左上角坐标到右上角坐标竖着范围内进行颜色渐变
		var jianbian = ctx.createLinearGradient(100,100,300,100);  // 左上角x,y坐标，右上角x,y坐标
		jianbian.addColorStop(0,"red");		
		jianbian.addColorStop(0.5,"blue");
		jianbian.addColorStop(1,"yellow");
		ctx.strokeStyle = jianbian;
		ctx.lineWidth = 10;
		ctx.moveTo(100,100);
		ctx.lineTo(300,100);
		ctx.stroke();
		
		//第二种： 斜着渐变，从指定的左上角坐标到右下角坐标斜着范围内进行颜色渐变
		ctx.beginPath();
		var jianbian2 = ctx.createLinearGradient(400,300,600,500);
		jianbian2.addColorStop(0,"cyan");
		jianbian2.addColorStop(0.3,"green");
		jianbian2.addColorStop(0.7,"purple");
		jianbian2.addColorStop(1,"blue");
		ctx.fillStyle = jianbian2;
		ctx.moveTo(400,300);
		ctx.lineTo(600,300);
		ctx.lineTo(600,500);
		ctx.lineTo(400,500);
		ctx.closePath();				//使用.closePath()方法即可自动封闭图形，封闭终点坐标到起点坐标！
		ctx.stroke();
		ctx.fill();
		
		
		// 发散渐变的实现
		//指定两个圆所形成的圆环内发散向四周渐变
		ctx.beginPath();
		var jianbian3 = ctx.createRadialGradient(150,400,50,150,400,200);  // 参数：第一个圆的圆心+半径，第二个圆的圆心+半径
		jianbian3.addColorStop(0,"red");
		jianbian3.addColorStop(0.3,"blue");
		jianbian3.addColorStop(0.7,"yellow");
		jianbian3.addColorStop(1,"green");
		ctx.fillStyle = jianbian3;
		ctx.moveTo(10,300);
		ctx.lineTo(310,300);
		ctx.lineTo(310,500);
		ctx.lineTo(10,500);
		ctx.closePath();
		ctx.stroke();
		ctx.fill();
		
	</script>
</html>

2️⃣实现效果：

🚉拓展——几种复杂图形的绘制

题目就是下面所列的五个，请小伙伴们发挥你们的小脑袋瓜，自己先动手绘制哦🙄！
所用的操作在上面都已详细讲解，没有一道题超纲哦（实践是检验真理的唯一标准🤩）
做完的小伙伴们可以看看下面我的代码和实现的效果，说不定你们做的比我的还要好😂！

使用红色填充的五角星；
使用渐变色填充的六边形；
机器人头部（使用线性渐变&&发散渐变）；
空心的五角星；
绘制一个四肢健全的小人。

1️⃣上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五道题</title>
		<style type="text/css">
			#canvas_first{
				border: 5px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas_first" width="1500" height="700"></canvas>
	</body>
	
	<script type="text/javascript五分钟学会 Canvas 基础
 一分钟学会canvas镂空文本小动画
 一分钟学会canvas镂空文本小动画
 Vue.js ——十分钟让你学会 Vuex
 熬夜总结了 “HTML5画布” 的知识点（共10条）
 教程 | 十分钟学会函数式 Python

为了让师妹20分钟学会canvas，我熬夜苦肝本文外加一个小项目❤️建议收藏❤️

🎍0、前言

💎目录

👝1.初级阶段——师傅领进门~

🎣（1）canvas是什么？

🍶（2）如何使用？

第一步：在html5页面创建canvas元素；

第二步：通过JavaScript来绘制。

1️⃣创建 Canvas 元素：

2️⃣通过 JavaScript 来绘制：

3️⃣实现效果：

🚧2.中级阶段——绘制一些常见的基本图形~

🚓（1）绘制一条直线

1️⃣上代码：

2️⃣实现效果：

🚑（2）绘制一条折线

1️⃣上代码：

2️⃣实现效果：

🚔（3）画矩形和圆

1️⃣上代码：

2️⃣实现效果：

🚐（4）颜色渐变之线性渐变和发散渐变

1️⃣上代码：

2️⃣实现效果：

🚉拓展——几种复杂图形的绘制

1️⃣上代码：