canvas&&SVG

h5新增 画布canvas

用于绘制图像，通过javeScript来实现，不过元素本身并没有绘制图像的能力，他仅仅数绘制图像的容器

常用API  不带（）属性 带（） 方法;

getContext("2d")    //返回一个CanvasRenderingContext2D对象，该对象提供了用于绘制图像的属性和方法;(下面的API都是改对象的);


颜色，样式和阴影;


fillStyle  //获取或设置填充颜色，渐变，或者模式;

strokeStyle   //获取或设置笔触的颜色，渐变。或者模式;

shadowColor    //获取或者设置阴影的颜色；

shadowBlur     //获取或者设置阴影的模糊程度; 

shadowOffsetX  //设置阴影在x轴的距离;  

shadowOffsetY   //设置阴影在Y轴的距离; 

createLinearGradient()  //创建线性渐变，参数1~2 设置开始渐变的位置  3~4 结束的位置;  返回一个渐变对象，需要填充颜色; 

createRadialGradient() 方法创建放射状/圆形渐变对象  参数1~3 设置开始的位置和半径大小  参数4~6 设置结束的位置和大小；

addColorStop()  //规定了渐变对象的停止位置和颜色;参数1 0~1之间的小数，规定渐变对象的位置，参数2渐变对象的颜色;


线条样式;

lineCap   //设置结束和开始点的线帽圆角  值：round 圆角  

lineJoin  //设置两个线相交时的拐角样式   round圆角  bevel 斜角

lineWidth  //设置线的宽度;

矩形

rect()   //创建矩形，使用路径绘制 参数1~2 设置矩形的位置，3~4设置矩形的大小;

fillRect(x,y,width,height) //绘制已经填色的矩形  参数1~2 设置矩形的位置，3~4设置矩形的大小;

strokeRect()      //绘制已经描写的矩形（无边框）; 参数1~2 设置矩形的位置，3~4设置矩形的大小;

clearRect()   //清除指定对象的指定大小的像素内容;   参数1~2 设置矩形的位置，3~4设置矩形的大小;


路径

fill()  //填充当前绘图（路径）;

beginPath()   //开始一条路径，或者重置一条路径;

moveTo()  //指定笔尖开始的位置  参数时笔尖x/y的位置;

lineTo()    //笔尖结束的位置，在开始和结束之间，存在没有被绘制下来的一条线;  
 
stroke()    //绘制一条路径; moveTo() 和 lineTo() 方法定义的路径;

closePath()  //创建当前点到起始点moveTo()之间的路径;

quadraticCurveTo()  //创建二次贝塞尔曲线   配合开始点的位置  参数1~2 控制点位置 参数3~4 结束点的位置;

bezierCurveTo()     //创建三次方贝塞尔曲线   参数1~2 控制点1位置 参数3~4 控制点2位置 参数5~6 结束点的位置;

arc()  //创建圆弧或者圆  参数1~2 圆心的坐标 参数3  圆的半径  参数4~5  开始和结束的圆弧;  参数6 顺手针或者逆时针 False = 顺时针，true = 逆时针。3点中方向是起始点;

转换

scale()  缩放  参数 x/y；

rotate()  旋转  deg;

translate()  //移动  可以映射;

transform()    //替换绘图的当前转换矩阵

文本

font  设置字体;

textAlign  文字的对齐方式；

fillText()   //设置被绘制的文字;  参数1需要绘制的文字，参数2和3  位置；

strokeText()   //设置被绘制的文字 （无填充）；

图像

drawImage()  //绘制图像或者视频;

参数一  要被挥着的Dom对象;  可以自定义一个dom节点;

参数2~3  图像的位置；

参数5~6  被剪裁图像的宽高;

详情访问：https://www.w3school.com.cn/tags/canvas_drawimage.asp

重叠之后的显示

globalCompositeOperation    //属性，规定画布重叠之后的显示;  下面是可选值;

source-over: 新图形会覆盖原有内容之上

source-atop: 新图形中与原有内容重叠的部分会被绘制，并覆盖于原来内容之上

source-in : 新图形只会出现原有内容重叠的部分，其他区域变成透明色

source-out : 只有新图形中与原有的内容不重叠的部分被保留

destination-over : 会在原有内容之下绘制新图形

destination-atop： 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形

destination-in : 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的

destination-out : 原有内容中与新图形不重叠的部分会被保留。

lighter ： 两图形中重叠部分作加色处理。

copy： 只有新图形会被保留，其它都被清除掉

xor ： 重叠的部分会变成透明

darker 两图形中重叠的部分作减色处理

---

Base64

使用canvas画布和canvas对象方法toDataURL()将服务器中的imgurl转化成base64编码格式;

什么是base64？ base64是网络上常见用于传输的8bit编码方式之一，具有不可读的特性;

如何实现 canvasDom对象有个方法toDataURL() 使用画布将img画到画布上面， 在将画布转为base64编码格式 就完成了base64编码格式的转换;

使用重点：封装函数，创建一个img对象实例，给img实例src复制，这样就可以直接请求数据，不用等待标签加载，

然后在img添加个load事件，监听img加载完成，在事件函数中，创建canvas标签，给canvas设置根图片一样的宽高，转化2d,调用函数drawImage()将图片

绘制在画布中，在使用canvas标签的方法，toDataURL() 将标签转化成base64编码方式,在使用回调函数，将数据返回出来;

toDataURL(“image/jpeg”) //将画布转化成base64编码格式;

toDataURL 可以使用window.open() 方法打开base64数据格式的一个图像页面，用于保存数据;

svg

"http://www.w3.org/2000/svg"
png,jpg,jpeg,bmp 像素图片
像素是指的是图像是小方格组成的，每一个小方格可以认为一个像素点，这些小方格在图像上都有一个明确的位置和色值的一个分配，小方格的位置和颜色决定了图像最终呈现效果，
可以将像素视为整个图像不可分割的单位或者元素，不可分割主要是指不能分割成更小单位或者元素，这一个像素以一个单一的颜色的存在，一个图像可以认为是一个点阵图，包含一定数量的像素，

gif 支持动画的图片格式

svg图片：是一种矢量图，他不记录图片的像素数据，而是通过xml语言记录绘制过程，所以svg图片本质就是一种xml文件

svg和谱普通图片的区别 svg的优势在于
    1 通过文本编辑器创建或者修改
    2 svg图像可以被搜索到、索引 、脚本化或压缩
    3 svg可以在任何分辨率下高质量的打印 
    4 svg图像在放大时候不会出现模糊  

svg与canvas的区别
 svg是使用一种xml描述2d图形的语言
 svg基于xml，svg中的元素标签可以使用,也可以为每一个元素添加js事件，每一绘制的元素也是一个对象，如果对象的属性发生变化，浏览器能够自动重绘图形
 <svg>
 <line>
 </svg>

 canvas 绘制图形
 canvas 通过js来绘制2d图形
 canvas 逐像素渲染的
 在canvas中 一旦图形被绘制完成之后，它就不会得到浏览器的关注，如果他的位置发生变化，整个场景也得需要重新绘制


区别：
  canvas
  canvas通过.png或者.jpg的格式进行保存
  依赖于分辨率
  不支持事件处理
  最适合图像比较密集的游戏

  svg
   可以支持事件处理
   不依赖于分辨率
   最适合使用于大型的渲染区域的应用（地图）
   复杂度比较高的图形 渲染的时候就比较慢（通过操作dom元素应用都比较慢）
   不适合做游戏应用