canvas的用法和svg的用法以及他俩的区别

本文介绍了HTML5的Canvas和SVG两种图形绘制技术。Canvas是通过JavaScript进行动态绘画，适合图像密集型应用，而SVG是基于XML的矢量图，适合大型渲染区域且支持事件处理器。文中详细讲解了Canvas的基本使用，包括创建画布、获取context对象、绘制线条、设置线条样式以及常用方法。同时，也简述了SVG的基本概念和与Canvas的区别。

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

Canvas 简介

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

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

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

<canvas> 标签

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

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

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

context对象

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

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

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

绘制线条

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

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

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

在画布中使用 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;

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

context.strokeStyle = 'red';

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

lineCap 属性的取值有3个：

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

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

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

context.fill();

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

context.fillStyle = 'green';

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

Canvas 常用方法

canvas 中常用的方法如下：

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

SVG 简介

SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。

HTML5 支持内联 SVG。

HTML <svg> 元素是 SVG 图形的容器。

SVG 有多种绘制路径、框、圆、文本和图形图像的方法。

SVG 与 Canvas 两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 与 SVG 的比较：

Canvas	SVG
依赖分辨率；不支持事件处理器；弱的文本渲染能力；能够以 .png 或 .jpg 格式保存结果图像；最适合图像密集型的游戏，其中的许多对象会被频繁重绘。	不依赖分辨率；支持事件处理器；最适合带有大型渲染区域的应用程序（比如谷歌地图）；复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）；不适合游戏应用。