canvas和svg

　　<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性。实际上，<canvas> 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOMproperties 来设置。当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

id属性并不是<canvas>元素所特有的，而是每一个HTML元素都默认具有的属性（比如class属性）。给每个标签都加上一个id属性是个好主意，因为这样你就能在我们的脚本中很容易的找到它。

 

<canvas>元素可以像任何一个普通的图像一样（有margin，border，background等等属性）被设计。然而，这些样式不会影响在canvas中的实际图像。我们将会在一个专门的章节里看到这是如何解决的。当开始时没有为canvas规定样式规则，其将会完全透明。

替换内容节

<canvas>元素与<img>标签的不同之处在于，就像<video>，<audio>，或者 <picture>元素一样，很容易定义一些替代内容。由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者文本浏览器不支持HTML元素"canvas"，在这些浏览器上你应该总是能展示替代内容。

 

这非常简单：我们只是在<canvas>标签中提供了替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

 </canvas> 标签不可省节

与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

如果不需要替代内容，一个简单的 <canvas id="foo" ...></canvas> 在所有支持canvas的浏览器中都是完全兼容的。

渲染上下文（The rendering context）节

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如， WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl") 。

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用 CanvasRenderingContext2D。

检查支持性节

替换内容是用于在不支持 <canvas> 标签的浏览器中展示的。通过简单的测试getContext()方

链接：https://www.nowcoder.com/questionTerminal/c5982f8b70ba427aab804643e12ab44d?orderByHotValue=1&page=1&onlyReference=false
来源：牛客网

calable Vector Graphics (简称SVG)，“可升级 矢量图形”的意思，它是由 W3C 制定的基于 可扩展标记语言 (XML) 来描述二维矢量图型的一个开放标准。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式,它具有以下优点：

· 图像文件可读，易于修改和编辑

· 与现有技术可以互动融合。例如， SVG 技术本身的动态部分(包括时序控制和动画(就是基于 SMIL 标准。另外， SVG 文件还可嵌入 JavaScript (严格的说应该是 ECMAScript )脚本来控制 SVG 对象

· SVG图形格式可以方便的建立文字索引，从而实现基于内容的 图像搜索

· SVG图形格式支持多种 滤镜和特殊效果，在不改变图像内容的前提下可以实现 位图格式中类似文字阴影的效果

· SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户

· SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 如何竞争的问题，另一个问题就是SVG的本地运行环境的下厂家支持程度。

Canvas 画布  位图

1.      不要在style中给canvas设置宽高 会有位移差

2.       

fillRect()  绘制一个填充的方块  默认颜色是黑色

strokeRect() 绘制带边框的方块

绘制线条

moveTo() 绘制线段的起点

lineTo() 绘制线段的领点

每个线条只能有一个moveTo可以有多个lineTo

Stroke()绘制线段

beginPath()

ClosePath()  二者同时出现  将绘制路径闭合

（起始点 结尾点首尾相连）

Rect() 绘制方块

clearRect(0,0,width,height)清除画布

Can.save()

Can.restore()   二者成对出现 中间的属性样式只影响内部 不影响外部

画圆

200，200 是圆心坐标

50 是半径

0是起始弧度  Math.PI是结束弧度

True 是逆时针方向

注意 角度有正负之分  顺时针转的角度是正的 逆时针转的角度是负的

 

 

贝塞尔曲线 了解

 

画布的平移和旋转

平移translate 画布大小位置不变  起始坐标 变了

相当于坐标平移

Rotate()

画布的旋转都是以00起始点为中心点旋转

Scale(0.5,0.5)

画布的缩放  就是将画布向后移动 跟人的视距就变远了 近大远小

画布中插入图片

插入字体

200,200字体的起始点 默认在起始点在字体的左下角

Svg  矢量图

Svg绘制矢量图canvas用于绘制位图

Svg使用xml格式绘制图形

Svg要有一个根节点 叫svg标签 就相当于html

Svg如果不设置大小 默认占用面积300*150

定义矩形

Rect 标签 属性有 width height x y rx ry fill stroke-width stroke style

Style=”fill-opacity:0.2;stroke-opacity:0.5;opacity:0.5”

Fill-opacity和opacity的区别 fill-opacity只改变填充色的透明度 opacity改变fill和stroke的透明度都改变

 

定义圆

Circle cx cy 定义圆的圆心坐标  r定义半径

 

定义椭圆

Ellipse cx cy 定义圆心坐标  rx 定义x轴半径 ry定义y轴半径

定义直线

Line  x1 y1 定义起始坐标 x2 y2 定义结束坐标 必须结合stroke绘制

定义多边形

Polygon points=”” 写多变形角的坐标  fill-rule=”” ???

 

定义折线

Polyline  points=”” 折点的坐标

 

定义路径

Path d=”M”

M是起点坐标 L是相邻点坐标 Z让路径构成闭合回路

H代表水平的线条 默认y轴上的值一样

V 代表垂直的线条 默认x轴上的值一样

A 后面跟七个值

Transfrom 转换 svg中的一个属性 translate  rotate scale

平移 旋转 都是以起点0 0（svg的左上角）点为参考点 而css3中以元素的中心点为参考点

G 用于将相关元素进行组合

G身上的属性 子元素都会继承 但是g上的属性都必须是显现属性 不是svg元素私有的 比如 g 上的圆心坐标不行

Text 用于定义文本 x y xy的值在字体的左下角

Text-anchor=”middle” 让字体居中

Image 绘制图片

Use用于复制元素 x y

Xy 是相对于原始的元素的坐标位置 不是相对svg的00点坐标

Animate

写在需要动画元素的中间

attributeName  form to dur repeatCount=”indefinite”(无限次)

echarts

引入文件后 console.log(echarts) //echarts object

 

 

十大图片

柱状图（bar） 折线图（line） 饼图（pie） 散点图(scatter) 地图(map) 气泡图(bubble)

基本名字

Grid 坐标系

Title: 图标的标题 是一个object

Legend 图例组件

Xaxis x轴坐标

Yaxis y轴坐标

Series 系列列表 []

 

 

 

 

 

Svg

1.      path   M是是起点 L是相邻点 后面都是两个值

H是横向绘制 后面跟一个值 默认y轴上的值一样 V是垂直绘制 后面跟一个值 默认x轴上的值一样

Z代表构造一个闭合回路