h5 canvas与SVG的比较

最新推荐文章于 2024-04-07 20:04:56 发布

weixin_30929195

最新推荐文章于 2024-04-07 20:04:56 发布

阅读量435

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mercy-up/p/10133575.html

版权

画布

什么是canvas？

HTML5的canvas标签使用JavaScript可以在网页上绘制图像，画布为一个矩形。

画布本身没有绘制能力，只能通过脚本来绘制。

画布例子：

<canvas id="canvas" width="500px" height="500px"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");    //必写的，获取对象
    var ctx = canvas.getContext("2d");         //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    ctx.beginPath();
    ctx.arc(250,250,200,0,2*Math.PI);
    ctx.closePath();
    ctx.strokeStyle = "aqua";
    ctx.stroke();
</script>

效果图：

画布可以做的不止画圆，这里就不一一举例。

SVG

什么是SVG？

SVG指的是可伸缩矢量图，一种二维图形表示语言。

在老的版本，你学习svg之前，必须先要了解XML。

那什么是XML呢？

XML是可扩展标记语言（EXtensible Markup Language），XML的设计宗旨是传输数据而非显示数据，而且XML标签没有被预定义，因此您需要自行定义标签。

XML应用于web开发的许多方面，常用于简化数据的存储与共享。

在HTML5以前还的建一个后缀名为.svg的文件，然后导入

01.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>

<body>
    <!--老版本的svg的用法-->    
    <iframe src="01.svg" width="300" height="100"></iframe>
</body>

效果如下：

而HTML5已经有了svg标签，就不用在导入了

<svg width="400px" height="400px">
    <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="10" />
    <rect x="120" y="120" width="100" height="100" style="fill:green;stroke:red;stroke-width: 20;"/>
</svg>

效果如下：

两者的区别：

　　canvas(位图)：

　　　　1.h5新出来的东西

　　　　2. 依靠分辨率

　　　　3. 不支持事件处理器(整个画布为一个整体，不能为其中的一个图像做事件处理)

　　　　4. 弱的文本渲染能力

　　　　5. 能够以 .png 或 .jpg 格式保存结果图像

　　　　6. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

　　svg(矢量图)：

　　　　1. 比较老了，不过现在HTML5中可以直接使用svg标签了

　　　　2. 不依赖分辨率

　　　　3. 支持事件处理器

　　　　4. 最适合带有大型渲染区域的应用程序（比如谷歌地图）

　　　　5. 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

　　　　6 .不适合游戏应用

转载于:https://www.cnblogs.com/mercy-up/p/10133575.html

weixin_30929195

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5 canvas与SVG的比较

画布什么是canvas？HTML5的canvas标签使用JavaScript可以在网页上绘制图像，画布为一个矩形。画布本身没有绘制能力，只能通过脚本来绘制。画布例子：<canvas id="canvas" width="500px" height="500px"></canvas><script type="text/javascript"...
复制链接

扫一扫