canvas SVG简介及绘制图形

最新推荐文章于 2024-05-10 12:42:21 发布

遇事不决选C

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_74022688/article/details/128375925

版权

1 章节目录

1.1 目标

Canvas 简介
使用 Canvas 绘制图形
Canvas 常用方法
SVG 简介
使用 SVG 绘制基本图形

1.2 重点

使用 Canvas 绘制图形
Canvas 常用方法
使用 SVG 绘制基本图形

1.3 难点

使用 Canvas 绘制图形
Canvas 常用方法
使用 SVG 绘制基本图形

2 Canvas 简介

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

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

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

3 使用 Canvas 绘制图形

3.1 <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 轴向下逐渐增加。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMxnxlET-1671444022055)(MD文档.assets/canvas-1.png)]

3.2 绘制线条

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ufLo718V-1671444022057)(MD文档.assets/canvas-2.png)]

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

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

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

context.moveTo(x, y);

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

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

context.lineTo(x, y);

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

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

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

context.stroke();

绘制字母 M，效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nv5eGlSN-1671444022057)(MD文档.assets/canvas-3.jpg)]

步骤一：创建画布：

<!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>

3.3 设置线条的样式

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

设置线条宽度：使用 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';

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EKaY7Znc-1671444022058)(MD文档.assets\canvas-4.jpg)]

3.3 设置线条的路径

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

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

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

最低0.47元/天解锁文章

遇事不决选C

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
canvas SVG简介及绘制图形

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

扫一扫