Canvas

最新推荐文章于 2023-07-25 07:31:39 发布

LikY03321

最新推荐文章于 2023-07-25 07:31:39 发布

阅读量299

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/LikY03321/article/details/128389481

版权

Canvas 简介

Canvas 表示画布，现实生活中的画布是用来作画的。

HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。

利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。

使用 Canvas 绘制图形

<canvas> 标签

使用 HTML5 中的 <canvas> 标签在网页中创建一个画布，语法格式如下：

<canvas id="canvas" width="400" height="300">
	您的浏览器不支持canvas标签，请更新浏览器
</canvas>

上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。

通过 JavaScript 的 getElementById() 方法获取到网页中的画布对象，代码如下所示：

var canvas = document.getElementById("canvas");

上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。

context 对象：是画布的上下文，也叫做绘制环境，是所有的绘制操作 API 的入口。 context 对象可以使用 getContext() 方法获得，代码如下所示：

var context = canvas.getContext('2d');

上述代码中的参数 2d 代表画笔的种类，表示二维绘图的画笔。如果想要绘制三维图，可以把参数替换为 webgl。

2d：代表一个平面，绘制图形时需要在平面上确定起始点，也就是“从哪里开始画”，这个点需要通过坐标来控制。

Canvas 的坐标系：从最左上角 0,0 开始。x 轴向右逐渐增加，y 轴向下逐渐增加。

绘制线条

线的定义：线是所有复杂图形的组成基础，想要绘制复杂的图形，首先要从绘制线开始。

线的组成：在绘制线之前首先要了解线的组成。一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边。

初始位置：在绘制图形时，我们首先需要确定从哪里下“笔”，这个下“笔”的位置就是初始位置。

在画布中使用 moveTo(x, y) 方法来定义初始位置，其中 x 和 y 表示水平坐标轴和垂直坐标轴的位置，中间用 , 隔开。x 和 y 的取值为数字，表示像素值（单位省略）。

设置初始位置的示例代码如下所示：

context.moveTo(x, y);

连线端点：在画布中使用 lineTo(x, y) 方法来定义连线端点。和初始位置类似，连线端点也需要定义 x 和 y 的坐标位置。

定义连线端点的代码如下所示：

context.lineTo(x, y);

描边：通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。

使用画布中的 stroke() 方法，可以实现线的可视效果。

设置描边的代码如下所示：

context.stroke();

绘制字母 M，效果如图：

步骤一：创建画布：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绘制字母M</title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
		</canvas>
	</body>
</html>

步骤二：绘制字母 M：

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.moveTo(10,100);		// 定义初始位置
    context.lineTo(30,10);		// 定义连接线端点
    context.lineTo(50,100);		// 定义连接线端点
    context.lineTo(70,10);		// 定义连接线端点
    context.lineTo(90,100);		// 定义连接线端点
    context.stroke();			// 描边
</script>

设置线条的样式

掌握设置线条的样式的方法，能够实现设置不同样式的线条。

设置线条宽度：使用 lineWidth 属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。

设置线的宽度的示例代码如下所示：

context.lineWidth = 10;

以上代码设置了线的宽度为 10px。

设置描边颜色：使用 strokeStyle 属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色的英文名。

设置描边颜色的示例代码如下所示：

context.strokeStyle = '#f00';
context.strokeStyle = 'red';

以上两种方式都可以用于设置线的描边颜色为红色。

设置端点形状：默认情况下，线的端点是方形的，通过 lineCap 属性可以改变端点的形状。

lineCap 属性的取值有3个：

butt（默认值）：默认效果，无端点，显示直线方形边缘
round：显示圆形端点
square：显示方形端点

设置端点形状的示例代码如下所示：

context.lineCap = 'round';	// 设置圆形端点

除了执行 stroke() 方法根据路径进行描边，还可以使用 fill() 方法进行图形的填充，示例代码如下：

context.fill();

同理也可以使用 fillStyle 属性可以定义路径的填充颜色，该属性的取值为十六进制颜色值或颜色的英文名，示例代码如下：

context.fillStyle = 'green';

以上代码将会给路径填充绿色。

注意：无论是描边还是填充，设置的样式都需要写在描边或填充方法之前才起作用。

设置线条的路径

掌握设置线条的路径的方法，能够在网页中绘制多种图形。

路径的定义：路径是所有图形绘制的基础，通过初始位置和连线端点即可创建一条路径。

路径需要通过路径状态进行重置或闭合，来产生不同的路径样式。

路径的状态：

重置路径
闭合路径

重置路径的概念：

在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。

绘制两条不同样式的线条，效果如图：

步骤一：创建画布

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="3000">
			您的浏览器不支持canvas标签，请更新浏览器
		</canvas>
	</body>
</html>

步骤二：重置路径

<script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    
    context.moveTo(10,10);			// 定义初始位置
    context.lineTo(300,10);			// 定义链接端点
    context.lineWidth=5;			// 设置线的宽度
    context.strokeStyle='red';		// 设置线的颜色
    context.stroke();				// 描边
    context.beginPath();			// 重置路径
    context.moveTo(10,60);			// 定义初始位置
    context.lineTo(300,60);			// 定义链接端点
    context.lineWidth=10;			// 设置线的宽度
    context.strokeStyle='green';	// 设置线的颜色
    context.stroke();				// 描边
</script>

闭合路径的概念：

闭合路径就是将我们绘制的开放路径进行封闭处理，多点的路径闭合后会形成特定的形状。在画布中使用closePath()方法闭合路径。

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
		</canvas>
		<script>
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
            
			context.moveTo(10,10);
			context.lineTo(10,100);
			context.lineTo(100,100);
			context.closePath();	// 闭合路径
			context.stroke();
		</script>
	</body>
</html>

canvas 绘制图形的基本步骤：

① 创建画布：<canvas></canvas>

② 准备画笔（获取上下文对象）：canvas.getContext('2d');

③ 开始路径规划：context.beginPath();

④ 移动起始点：context.moveTo(x, y);

⑤ 绘制线（矩形、圆形、图片...）：context.lineTo(x, y);

⑥ 闭合路径：context.closePath();

⑦ 绘制描边：context.stroke();

Canvas 常用方法

canvas 中常用的方法如下：

绘制图形	方法	描述
矩形	rect()	创建矩形。
	fillRect()	绘制带填充的矩形。
	strokeRect()	绘制无填充的矩形。
	clearRect()	在给定的矩形内清除指定的像素。
圆形	arc()	创建圆形。
椭圆形	ellipse()	创建椭圆形。
文本	strokeText()	绘制空心文本。
文本	fillText()	绘制实心文本。
图像	drawImage()	绘制图像。

canvas 绘制矩形

绘制一个红色的矩形，效果如下：

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="400" height="300">
			您的浏览器不支持canvas标签，请更新浏览器
		</canvas>
		<script>
			var canvas = document.getElementById('canvas');	// 获取canvas标签
			var context = canvas.getContext('2d');			// 获得context对象
            
			context.fillStyle = 'red';						// 设置填充颜色
			context.fillRect(0,0,200,100);					// 绘制填充的矩形
		</script>
	</body>
</html>

设置 fillStyle 属性可以是 CSS 颜色、渐变或图案。fillStyle 默认设置是 #000000（黑色）。

fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

canvas 绘制圆形

在canvas中绘制圆形，我们将使用以下方法:

arc(x, y, r, start, stop)

参数分别是：（圆心x坐标, 圆心y坐标, 半径r, 开始弧度, 结束弧度）。

结束弧度的计算公式：角度 * Math.PI / 180。

绘制一个圆，效果如下：

示例代码：

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.arc(100, 100, 50, 0, 360 * Math.PI / 180);	// 绘制圆形
    context.stroke();	// 描边
</script>

canvas 绘制椭圆

在 canvas 中绘制椭圆, 我们将使用以下方法:

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

参数分别是：（椭圆圆心x坐标, 椭圆圆心y坐标, 半径x, 半径y, 旋转的角度, 起始角, 结束角, 顺时针/逆时针）

绘制一个椭圆，效果如下：

示例代码：

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.ellipse(120, 100, 100, 50, 0, 0, 360 * Math.PI / 180);	// 绘制椭圆
	context.stroke();	// 描边
</script>

canvas 绘制文本

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用“Arial”字体在画布上绘制一个高 30px 的实心文字：

示例代码：

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    context.font = '30px Arial';	// 设置文本样式
	context.fillText('Hello World', 10, 50);	// 绘制实心文字
</script>

canvas 渐变

渐变可以填充到矩形、圆形、线条、文本等，各种形状可以自定义不同的颜色。

有两种方式来设置 Canvas 渐变：

createLinearGradient(x, y, x1, y1)：创建线条渐变；
createRadialGradient(x, y, r, x1, y1, r1)：创建一个径向/圆渐变。

使用 createLinearGradient()，创建一个线性渐变。

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop() 方法指定停止颜色，位置可以是 0 至 1。

使用渐变，设置 fillStyle 或 strokeStyle 的值为渐变，然后绘制形状，如矩形、文本或一条线。

使用渐变填充矩形:

示例代码：

<script>
    var canvas = document.getElementById('canvas');	// 获取canvas标签
    var context = canvas.getContext('2d');			// 获得context对象
    
    var gradient = context.createLinearGradient(0, 0, 200, 0);	// 创建渐变
	gradient.addColorStop(0, 'red');		// 设置渐变颜色（开始）
	gradient.addColorStop(1, 'green');	// 设置渐变颜色（结束）
	context.fillStyle = gradient;				// 设置渐变填充样式
	context.fillRect(10, 10, 200, 80);	// 绘制矩形
</script>

LikY03321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas

Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。
复制链接

扫一扫