【HTML5】——canvans入门

最新推荐文章于 2022-01-20 18:08:52 发布

二十五六岁

最新推荐文章于 2022-01-20 18:08:52 发布

阅读量2.5k

点赞数 1

分类专栏：移动web开发文章标签： canvas

本文链接：https://blog.csdn.net/qq_40803626/article/details/101475157

版权

移动web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在网页中插入canvas元素

在向HTML5页面中添加Canvas元素时，需要设置元素的id、宽度和高度，例如：

<canvas>您的浏览器不支持canvas标签</canvas>

注意，在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。

使用标签实现绘图的流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 1. 先插入 -->
		<canvas id="canvas1">您的浏览器不支持canvas标签</canvas>
		
		<!-- div对象等其他对象不行 -->
		<!-- <div id="canvas1"></div> -->

		<script>
			// 2. 获取canvas对象
			var canvas = document.getElementById("canvas1");
			// 3. 获取canvas对象
			// canvas对象包含了不同类型的绘图API，还需要使用getContext()方法来获取接下来要使用的绘图上下文对象
			//参数2d，说明将要绘制的是一个二维图形
			var context = canvas.getContext("2d");
			
			// 3. 在Canvas上绘制文字
			//设置字体样式、颜色及对齐方式  绘制文字
			context.font = "98px 黑体";
			context.fillText("中", 100, 120, 200);
			context.fillStyle = "#026";
			context.textAlign = "center";
		</script>
	</body>
</html>

绘制矩形

绘图API为绘制矩形提供了两个专用的方法：strokeRect()和filleRect()，可分别用于绘制矩形边框和填充矩形区域。

绘制矩形边框
使用strokeRect()方法绘制矩形边框

context. strokeRect(x,y,width,height);

	<body>
		<!-- 1. 先插入 -->
		<canvas id="canvas1">您的浏览器不支持canvas标签</canvas>

		<!-- div对象等其他对象不行 -->
		<!-- <div id="canvas1"></div> -->

		<script>
			// 2. 获取canvas对象
			var canvas = document.getElementById("canvas1");
			// 3. 获取canvas对象
			// canvas对象包含了不同类型的绘图API，还需要使用getContext()方法来获取接下来要使用的绘图上下文对象
			//参数2d，说明将要绘制的是一个二维图形
			var context = canvas.getContext("2d");
			context.strokeRect(10, 10, 100, 100);
		</script>
	</body>

在这里插入图片描述

填充矩形区域
使用fillRect()填充矩形区域

context. fillRect(x,y,width,height);

在这里插入图片描述

小李子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="400px" height="200px" style="border:1px solid #d3d3d3;">
			您的浏览器不支持 HTML5 canvas 标签。</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.strokeStyle = "#FFF";
			ctx.lineWidth = 10;
			ctx.strokeRect(50, 50, 300, 300);
			ctx.fillStyle = "rgba(6,191,247,0.3)";
			ctx.fillRect(70, 70, 360, 360);
		</script>

	</body>
</html>

在这里插入图片描述

使用moveTo与lineTo路径绘制火柴人

canvas划线的两种方法：

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

特殊函数closePath：这个函数的行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。

注意：不管调用它们哪一个，都不会真正画出图形，因为我们还没有调用stroke或者fill函数。目前，我们只是在定义路径的位置，以便后面绘制时使用。

		<canvas id="myCanvas" width="400px" height="200px" style="border:1px solid #d3d3d3;">
			您的浏览器不支持 HTML5 canvas 标签。</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.moveTo(0, 0);
			ctx.lineTo(400, 200);
			ctx.stroke();
		</script>

在这里插入图片描述

使用arc方法绘制圆形

要想绘制其他图形，需要使用路径。同绘制矩形一样，绘制开始时还是要取得图形上下文，然后需要执行如下步骤。

开始创建路径
使用图形上下文对象的beginPath()方法或者重置当前路径，回到moveTo之前的起始地点，该方法的定义如下所示：

context.beginPath()
该方法不使用参数。通过调用该方法，开始路径的创建。

创建图像的路径
使用图形上下文对象的arc()方法。该方法的定义如下所示。

context.arc(x,y,radius, startAngle, endAngle,anticlockwise)
x为绘制圆形的起点横坐标
y为绘制圆形的起点纵坐标
radius为圆形半径
startAngle为开始角度
endAngle为结束角度
anticlockwise为是否按顺时针方向进行绘制。

关闭路径
路径创建完成后，使用图形上下文对象的closePath方法将路径关闭。该方法定义如下所示。

context.closePath();  
将路径关闭后，路径的创建工作就完成了，但是需要注意的是，这时只是路径创建完毕而已，还没有真正绘制图形。

进行圆形绘制，并设定绘制样式。实现的代码如下所示。

context.fillStyle = 'rgba(255, 0, 0, 0.25)';  
context.fill();

在canvas API中，绘制半径与弧时指定的参数为开始弧度与结束弧度，如果习惯使用角度，请使用如下所示的方法将角度转换为弧度。
var radians =degrees*math.PI/180
math.PI表示角度为180度
math.PI*2表示角度为360度。
arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。因此，使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。Anticlockwise参数为一个布尔值的参数，参数值为true时，按顺时针绘制；参数值为false时，按逆时针方向绘制。
arcTo()，使用切线的方法绘制弧线，使用两个目标点和一个半径，为当前的路径添加一条弧线。与arc方法相比，同样是绘制弧线，绘制思路和侧重点不同
arcTo(x1,y1,x2,y2,radius)

		<canvas id="myCanvas" width="400px" height="200px" style="border:1px solid #d3d3d3;">
			您的浏览器不支持 HTML5 canvas 标签。</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.arc(200, 100, 80, 0, 1.5 * Math.PI);
			ctx.stroke();
		</script>

在这里插入图片描述


		<canvas id="myCanvas" width="400px" height="200px" style="border:1px solid #d3d3d3;">
			您的浏览器不支持 HTML5 canvas 标签。</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.arc(200, 100, 80, 0, 1.5 * Math.PI);
			ctx.closePath();  
			ctx.fillStyle = 'rgba(255, 0, 0, 0.25)';  
			ctx.fill();
			ctx.stroke();
		</script>

在这里插入图片描述

贝塞尔和二次方曲线

绘制贝塞尔曲线主要使用bezierCurveTo方法。该方法可以说是lineTo的曲线版，将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。该方法的定义如下所示。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

该方法使用六个参数。绘制贝塞尔曲线的时候，需要两个控制点，cp1x为第一个控制点的横坐标，cp1y为第一个控制点的纵坐标；cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵坐标；x为贝塞尔曲线的终点横坐标，y为贝塞尔曲线的终点纵坐标。

绘制二次样条曲线，使用的方法是quadraticCurveTo。该方法的定义如下所示。
quadraticCurveTo(cp1x, cp1y, x, y)
两种方法的区别如下图所示。它们都是一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。

在这里插入图片描述


		<canvas id="myCanvas" width="400px" height="200px" style="border:1px solid #d3d3d3;">
			您的浏览器不支持 HTML5 canvas 标签。</canvas>
		<script>
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.moveTo(75, 25);
			ctx.quadraticCurveTo(25, 25, 25, 62.5);
			ctx.quadraticCurveTo(25, 100, 50, 100);
			ctx.quadraticCurveTo(50, 120, 30, 125);
			ctx.quadraticCurveTo(60, 120, 65, 100);
			ctx.quadraticCurveTo(125, 100, 125, 62.5);
			ctx.quadraticCurveTo(125, 25, 75, 25);
			ctx.stroke();
		</script>

在这里插入图片描述

fillStyle 和 strokeStyle属性填充及填充样式

如果想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。这两个属性的定义方法如下所示。

fillStyle = color
strokeStyle = color

strokeStyle 是用于设置图形轮廓的颜色，而 fillStyle用于设置填充颜色。

透明度 globalAlpha

通过设置 globalAlpha属性或者使用一个半透明颜色作为轮廓或填充的样式来绘制透明或半透明的图形。globalAlpha属性定义代码如下所示：

globalAlpha = transparency value

这个属性影响到 canvas 里所有图形的透明度，其有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0。

线型 Line styles

lineWidth 属性，该属性设置当前绘线的粗细，属性值必须为正数。默认值是1.0。线宽是指给定路径的中心到两边的粗细。换句话说就是在路径的两边各绘制线宽的一半。
lineCap 属性，该属性决定了线段端点显示的样子。它可以为下面的三种值之一：butt，round 和 square，默认是 butt。
lineJoin 属性，该属性值决定了图形中两线段连接处所显示的样子。它可以是以下三种值之一：round, bevel 和 miter。默认是 miter。

绘制文本

通过<canvas>标签，可以使用填充的方法绘制文本，也可以使用描边的方法绘制文本，在绘制文本之前，可以设置文字的字体样式和对齐方式。绘制文本的方法有两种，一种是填充绘制方法fillText()，另一种是描边绘制方法strokeText()

fillText(text,x,y,maxwidth);
strokeText(text,x,y,maxwidth);

获取文字宽度
有时我们需要知道所绘制的文本宽度，以方便进行布局。绘图API提供了获取绘制文本宽度的方法，measureText(text);参数text表示所要绘制的文本，该方法返回一个TextMetrics对象，表示文本空间度量，可以通过该对象的width属性获取文本的宽度。
渐变是一种很普遍的视觉效果，能带来视觉上的舒适感。在canvas中，绘图API提供了两个原生的渐变方法，包括线性渐变和径向渐变
使用渐变需要3个步骤：
1. 首先是创建渐变对象;
2. 其次是设置渐变颜色和过渡方式；
3. 最后将渐变对象赋值给填充样式或描边样式

绘制线性渐变

线性渐变是指起始点和结束点之间线性的内插颜色值。
绘制线性渐变时，需要使用到LinearGradient对象。使用图像上下文对象的createLinearGradient()方法创建该对象。该方法的定义如下所示。

context.createLinearGradient(xStart,yStart,xEnd,yEnd)

该方法使用四个参数，xStart为渐变起始地点的横坐标，yStart为渐变起始地点的纵坐标，xEnd为渐变结束地点的横坐标，yEnd为渐变结束地点的纵坐标。

设置渐变颜色需要在渐变对象上使用addColorStop()方法，在渐变中的某一点添加一个颜色变化

addColorStop(offset,color)

Offset为所设定的颜色离开渐变起始点的偏移量。该参数的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1。

径向渐变是指在两个指定圆的圆周之间放射性地插颜色值
使用图形上下文对象的createLinearGradient方法绘制径向渐变，该方法的定义如下所示。

context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)

该方法使用六个参数，xStart为渐变开始圆的圆心横坐标，yStart为渐变开始圆的圆心纵坐标，radiusStart为开始圆的半径，xEnd为渐变结束圆的圆心横坐标, yEnd 为渐变结束圆纵的坐标，radiusEnd为结束圆的半径。
在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。在设定颜色时，与线性渐变相同，使用的是addColorStop方法进行设定。同样是需要设定0到1之间的浮点数来作为渐变转折点的偏移量。