画布

什么是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 .不适合游戏应用

h5 canvas与SVG的比较的更多相关文章

  1. H5 Canvas vs. SVG

    HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XM ...

  2. canvas与svg特性和使用对比

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. canvas和svg的区别

    讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...

  4. 前端绘图方式Canvas和SVG的区别

    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片.下面来介绍和分析一下他们. 一.Canvas 和 SVG 简介 1.什么是Canvas? Canvas 是H5 ...

  5. HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  6. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  7. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  9. 【HTML5】Canvas和SVG的区别

    * SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 ...

随机推荐

  1. Hbase CMS GC 调优。

    export HBASE_OPTS="-XX:+UseConcMarkSweepGC" export HBASE_LOG_DIR=/app/hbase/logexport HBAS ...

  2. 分布式监控系统开发【day38】:报警策略设计（二）

    一.策略和动作多对多的好处坏处 1.好处: 相同服务,相同策略的服务可以不用重复写好多次触发器 2.坏处: 1.策略A给小李和小罗发邮件2.策略B给小胡和小崔发邮件3.策略A是第三部发邮件4.策略B是 ...

  3. CopyOnWriteArrayList真的完全线程安全吗

    我之前书上看到的说法是:Vector是相对线程安全,CopyOnWriteArrayList是绝对线程安全 这种说法其实有些问题,CopyOnWriteArrayList在某些场景下还是会报错的 Co ...

  4. Docker下安装GitLab

    1.需要先安装Docker和Docker Compose,参考:https://www.cnblogs.com/hackyo/p/9280042.html 2.配置GitLab SSL(可跳过): m ...

  5. Chain TDNN/LSTM的拼帧索引、延时

    TDNN模型示例 TDNN拼帧: 层:(0,3) 层:(-9,0) 层:(0,3) 层:(-6,0) 层:(0,3) 层:(-3,0) 层:(0,3) 层:(-3,0)     输出依赖 帧,各层需要 ...

  6. 记事本：CSS

    css更多的是一种用来修饰HTML的语言 CSS的三种引入方式 1.行内样式:一般不会这样写,如果想选择某一个,可以用之后内部样式中更加详细的选中方式 行内的优先级最高 <p style=&qu ...

  7. pythonのdjango初体验

    简单的一个列表展示,实现了增.删.插 1.通过新建项目来创建一个Django项目 2.通过pycharm中的Terminal来创建app   ,命令如下: python manage.py start ...

  8. Centos7.5 安装VirtualBox增强工具

    一.安装 1.自带tools:  选择VirtualBox工具栏 => 设备 => 安装增强功能 2.挂载光驱 3.进入光驱目录,执行(一定要用root权限执行) ①安装gcc yum i ...

  9. WGAN讲解

    参考:https://blog.csdn.net/omnispace/article/details/54942668 上面这篇博客讲的很好!

  10. vue 报错总结

    关闭vue-cli 默认eslint规则: 找到 build -> webpack.base.config.js ,删除箭头指向代码 1.Newline required at end of f ...