Cavans VS SVG
Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
首先我们来说一下SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
接下来我们来了解一下Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
最后我们来比较一下 Canvas 与 SVG的不同之处
Canvas
· 依赖分辨率
· 不支持事件处理器
· 弱的文本渲染能力
· 能够以 .png 或 .jpg 格式保存结果图像
· 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
· 不依赖分辨率
· 支持事件处理器
· 最适合带有大型渲染区域的应用程序（比如谷歌地图）
· 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
· 不适合游戏应用
下面是SVG和Canvas的小例子
以实现一个红色的圆形为例
利用svg 画出一个圆形 保存为 circle.svg
文件名必须保存为 .svg格式
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
<?xml version="1.0" standalone="no"?>
然后我们新建一个html文件 svg.html
<html>
<head></head>
<body>
<iframe src="html.svg" width="300" height="100">
</iframe>
</body>
</html>
在浏览器中打开 svg.html 我们会惊喜的发现有一个红色背景的圆形呈现在屏幕上
利用 Canvas 画一个圆形
可以新建一个 canvas.html 直接在代码中写入一下代码
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
然后用浏览器打开canvas.html就可以发现一个红色背景的圆形了
希望本文对大家理解Canvas 和 SVG 有一定的帮助
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
使用 CSS 更改 HTML 中 SVG 元素的颜色
发布时间：2023/04/28 浏览次数：201 分类：CSS
-
一篇关于在 HTML 中使用 SVG 元素以及我们如何使用 CSS 更改 SVG 颜色的文章。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
