canvas和svg

1》<canvas>标签只有两个属性-width和height，当没有设置的时候width=300px，height=150px；也可以通过css来设置，但是当css的尺寸与初始画布的比例不一致时会出现扭曲（这时明确高度）

2》浏览器对HTML5标准支持不一样，所以通常在<canvas>内部会添加一些说明性HTML代码，如果浏览器支持canvas它将忽略，如果不支持他将显示<canvas>内部HTML

3》getContext("2d")方法让我们拿到一个CanvasRenderingContext2D对象，所有的绘图操作都需要通过这个对象完成。

4》如果需要3D，HTML5还有一个WebGl规范，允许canvas中绘制3D图形

var cxt=canvas.getContext("webgl");

5》canvas坐标系统：

Canvas的坐标以左上角为原点，水平向右为x轴，垂直向下为Y轴。以像素为单位，所以每个点都是非负整数

绘制形状

6》Canvas除了能绘制基本形状和文本，还可以实现动画，缩放，各种滤镜和像素转换等高级操作，如果实现非常复杂的操作，可以考虑以下优化方案：

1. 通过创建一个不可见的Canvas来绘图，然后将最终绘制结果复制到页面可见的canvas中
2. 尽量使用整数坐标而不是浮点数
3. 可以创建多个重叠的canvas绘制不同的层，而不是在一个canvas中绘制复杂的图
4. 背景图片如果不变可以直接用<img>标签并放到最底层

7》arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

绘制图形

<canvas id="canvas" width="400" height="400">
		<p>你的浏览器不支持"canvas"</p>
	</canvas>

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// var ctx=canvas.getContext("webgl");
ctx.clearRect(0,0,400,400);// 擦除(0,0)位置大小为400x400的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle="#ddd"; // 设置颜色
ctx.fillRect(10,10,200,200);// 把(10,10)位置大小为200x200的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75,75,50,0,Math.PI*2,true);
path.moveTo(110,75);//将笔触移到指定位置
path.arc(75,75,35,0,Math.PI,false);
path.moveTo(70,65);
path.arc(65,65,5,0,Math.PI*2,true);
path.moveTo(95,65);
path.arc(90,65,5,0,Math.PI*2,true);
ctx.strokeStyle="#0000ff";
ctx.stroke(path);//绘制已经定义好的路线

绘制文本

ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.shadowOffsetX=2;
ctx.shadowOffsetY=2;
ctx.shadowBlur=2;
ctx.shadowColor="#666";
ctx.font="25px  Arial";
ctx.fillStyle="#333";
ctx.fillText("带阴影文字",20,40)

https://www.jianshu.com/p/a77b2b44bfc9

1》在HTML中使用SVG有两种方式，可以在HTML文件中直接嵌入svg文件，也可以直接引入后缀名为.svg的文件

2》坐标：Svg坐标是垂直向下为Y轴，顺势针方向角度为正值

3》颜色RGB和HSL(颜色，饱和度，亮度）

4》Svg标签属性：

width和height

viewBox：定义用户视野的位置以及大小

<svg width="200" height="200" style="border:2px solid #ccc" viewBox="20 20 100 100">
	<rect x="30" y="30" width="200" height="200" fill="red" stroke="none">
	</rect>
</svg>

preserveaspectRatio:作用于viewBox，取值：有两个参数，第一个参数控制viewBox对齐方式（由两个值组成，第一个控制x轴对齐方式，第二个值控制y轴对齐方式），第二个参数控制viewBox的缩放方式

preserveaspectRatio=”none”表示变形以充分适应svg

5》svg内部样式支持css选择器给元素添加，也可以直接设置样式或者卸载style中

6》内部元素

矩形 < rect >
圆形 < circle >
椭圆 < ellipse >
线 < line >
折线 < polyline >
多边形 < polygon >
路径 < path >
文本 < text >

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="100"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
x,y 为图形左上角相对父元素svg的坐标，rx,ry分别为x,y方向的圆角半径；style定义样式

矩形 - rect元素
x：矩形左上角的坐标(用户坐标系)的x值。
y：矩形左上角的坐标(用户坐标系)的y值。
width：矩形宽度。
height：矩形高度。
rx：实现圆角效果时，圆角沿x轴的半径。
ry：实现圆角效果时，圆角沿y轴的半径。

圆 - circle元素
r：圆的半径。
cx：圆心坐标x值。
cy：圆心坐标y值。

椭圆 - ellipse元素
rx：半长轴(x半径)。
ry：半短轴(y半径)。
cx：圆心坐标x值。
cy：圆心坐标y值。

7》渲染

SVG是严格按照定义元素的顺序来渲染的。在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素。

3)svg和canvas区别

canvas	svg
提供API通过js绘制	使用XML格式定义基于矢量的图形
逐像素进行渲染	每个被绘制的图形均被视为对象
依赖分辨率	不依赖不分辨（图像在放大或者改变尺寸的情况下其图形质量不会有损失）
渲染速度快适合图像密集型的游戏	复杂度高会减慢渲染速度不适合游戏，可以用来做地图（百度地图就是使用svg）