H5强大的画布标签canvas和svg

H5新增绘画标签简介

  在H5中对于绘画的功能一直都是强大，可以做出十分华丽的动画效果和经常使用图标都是H5标签新增绘画标签canvas和svg,这两个标签
下限低（可以很简单绘制比较单调的几何图形🙂🙂），
上限高（做出华丽的动画效果，需要考虑空间想象能力，三角函数，贝塞尔函数…等😑😑）

下面我会分成目录，给大家讲解canvas与svg

csnvas与svg基本介绍

canvas
 是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。

svg
 可缩放矢量图形(Scalable Vector Graphics，SVG)是W3C推出的基于XML的二维矢量图形标准。SVG可以提供高质量的矢量图形渲染，同时由于支持JavaScript和文档对象模型，SVG图形通常具有强大的交互能力。另一方面，SVG作为W3C所推荐的基于XML的开放标准，能够与其他网络技术进行无缝集成。

csnvas与svg用途

canvas用途

• 实时的走势图
• 统计图表 canvas
• 验证 随机内容的图片
• 在线画图板
• HTML5游戏

由于canvas的图片格式是位图，其主要特点就是，色彩丰富，适合用来做成各种高像素的图片。
但其缺点也很明显，在缩放明显的场合会失真(图片模糊)

SVG用途

• logo
• 网页图标
• 地图
  虽然svg的使用场合比较少，但是其是矢量图的特点。放大缩小不失真，也被经常使用在logo和图标中，但也因为它的颜色比较单调也只能适合这些用色比较单调的图标上

csnvas与svg语法标签

canvas标签
一个默认为300*150的inline元素，使用width/height属性指定尺寸，但不要使用CSS样式指定宽高&