H5新增绘画标签简介

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

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

canvas与svg

csnvas与svg基本介绍csnvas与svg用途csnvas与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样式指定宽高，样式上设置的宽高是将整个画布做的伸缩 与图片同理，需要在js中才能执行画布的属性

//获取画布 var canvas = document.getElementsByTagName('canvas')[0]; //获取绘制上下文 var ctx = canvas.getContext('2d');

SVG标签 一个默认为300*150的inline元素，在使用css样式绘画svg时要使用svg那套规则进行添加样式，在使用html标签来执行绘画

<?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"> //XML Name Space：命名空间 <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>

canvas画布属性与svg语法标签

canvas标签 canvas通过提前给定标签来获取样式

{ fillStyle: "#000000"// 填充样式 font: "10px sans-serif"//绘制文本所用的 字号 字体等 lineCap: "butt"//线段的帽子 lineJoin: "miter"//线条拐点的样式 lineWidth: 1//描边、轮廓的宽度 miterLimit: 10 shadowBlur: 0//阴影模糊半径 shadowColor: "rgba(0, 0, 0, 0)"//阴影的颜色 shadowOffsetX: 0//水平的偏移量 shadowOffsetY: 0//阴影的偏移量 垂直偏移量 strokeStyle: "#000000"//描边、轮廓颜色 textAlign: "start"//文本的对其方式 textBaseline: "alphabetic"//文本对其的基线 默认值 }

小结

来做个小结

表头一绘图类型缩放颜色细节运用领域内容事件绑定canvas位图失真丰富图片，游戏js绘图只能在canvas标签绑定svg矢量图不失真单调图标，地图，统计图图形标签在每个标签上绑定

以上就是canvas与svg基本区别