画布

什么是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. NOI-OJ 2.2 ID:6261 汉诺塔

    思路 汉诺塔是递归思想最经典的例子,通过递归不断缩小问题,将n个盘子的问题简化n-1个,直至1个. 三个盘子,分别为A:from,B:to,C:by(A为起点盘,B为目标盘,C为中转盘) 过程 将1- ...

  2. 069、Calico的默认连通性（2019-04-12 周五）

    参考https://www.cnblogs.com/CloudMan6/p/7536746.html   Calico 跨主机连通性测试   root@host1:~# docker exec bbo ...

  3. CSS 水平垂直居中的几种实现方法

    前言 项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style> ...

  4. 导出CSV 换行问题。

    程序方面: 1.Windows 中的换行符"\r\n" 2.Unix/Linux 平台换行符是 "\n". 3.MessageBox.Show() 的换行符为 ...

  5. 第四章Android移植环境搭建

    第四章Android移植环境搭建 这一章主要学习如何搭建 Android 移植的环境.因为 Android 底层是基于 Linux 内核的,所以本章从交叉编译环境等嵌入式开发环境的搭建开始,介绍了 B ...

  6. vueRouter lazyLoad

    import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/hello/ind ...

  7. RabbitMQ环境搭建

    消息 RabbitMQ  1.安装erlang环境 2.安装rabbitmq 3.参考资料 AMQP协议,可以跨语言通信 Advance Message Queuing Protocol Rabbit ...

  8. Visual Studio Code 的使用方法和技巧

    VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是`资源管理器`,`搜索`, ...

  9. Google Android SDK开发范例大全笔记 二

    网络设备管理相关相关 代码地址 1 WifiManager LocationManager分别控制 wifi及GPS WifiManager 判断网络状态 ,LocationManager判断定位状态 ...

  10. SpringMVC的入门示例

    1.配置流程说明 第一步:导入包 第二步:构建一个请求,编写请求页面 第三步:配置核心控制器 第四步:构建一个业务控制器 第五步:编写Spring配置文件 第六步:编写一个返回页面 2.配置流程--- ...