画布

什么是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. Teamviewer远程ssh命令行更改密码启动

    Teamviewer远程ssh命令行更改密码启动 设置密码 $ sudo teamviewer passwd [NewPasswd ] 查看teamviewer信息 $ teamviewer info ...

  2. Python包中__init__.py作用

    在创建python包的过程中,IDE都会在包根目录下创建一个__init__.py文件,该Python文件默认是空的.目录结构如下: Pycharm下的package树结构: 在Finder中的目录结 ...

  3. 常见的cmake工程做法

    第一步,创建一个build目录存放cmake生成的中间文件: mkdir build 第二步,进入到build文件目录: cd build 第三步,cmake把代码文件生成一个makefile文件: ...

  4. main 及Scanner

    通过main方法的args数组可以从控制台获取一组字符串数据. 1.Scanner类用于扫描从控制台输入的数据,可以接收字符串和基本数据类型的数据. 2.Scanner类位于java.util.Sca ...

  5. java和数据库中日期类型的常见用法

    (1)java中日期类型:Date.Timestamp(2)数据库中:Date.Timestamp(3)字符串和Date之间的格式化转换:    SimpleDateFormat类方法: format ...

  6. 34. Find First and Last Position of Element in Sorted Array

    1. 原始题目 给定一个按照升序排列的整数数组 nums,和一个目标值 target.找出给定目标值在数组中的开始位置和结束位置. 你的算法时间复杂度必须是 O(log n) 级别. 如果数组中不存在 ...

  7. Django ORM中，如何使用Count来关联对象的子集数量

    示例models 解决方法 有时候,我们想要获取一个对象关联关系的数量,但是我们不要所有的关联对象,我们只想要符合规则的那些关联对象的数量. 示例models # models.py from dja ...

  8. vue.js过滤器

    import Vue from 'vue' import { ENV } from '@/config/conf' const dateFormat = (str) => { var date ...

  9. const与#define相比有什么不同？

    C++语言可以用const定义常量,也可以用#define定义常量,但是前者比后者有更多的优点:● const常量有数据类型,而宏常量没有数据类型.编译器可以对前者进行类型安全检查,而对后者只进行字符 ...

  10. js在数组arr中随机获取count数量的元素

    // 在数组arr中随机获取count数量的元素; const getRandomArrayElements = (arr, num) => { // 新建一个数组,将传入的数组复制过来,用于运 ...