前端-JS-Canvas

SVG 使用数据就可以绘制点、线、图形的，基于 XML 的标记语言；
　　一种矢量图形文件格式， 不仅现在的浏览器都支持，很多主流的系统也都支持
WebGL 以 OpenGL ES 2.0() 为基础的一套 浏览器 3D图形API （HTML5），Three.js、Babylon.js、Blender4Web等是几种知名的 WebGL 开发框架拿来就用
Canvas HTML5新增的一个元素对象只支持2D,缺点性能和效果不如WebGL,优点，部分手机不支持WebGL

常用API
　　//获得画布元素
　　var canvas1=document.getElementById("canvas1");
　　//获得2维绘图的上下文
　　var ctx=canvas1.getContext("2d");
　　//设置
　　ctx.lineWidth=10;//设置线宽
　　ctx.strokeStyle="blue";//设置线的颜色
　　ctx.shadowColor="black";//设置或返回用于阴影的颜色
　　ctx.shadowBlur=20;//设置阴影模糊级数
　　ctx.shadowOffsetX=-20;//设置左侧阴影在 20 像素处，=20为右像素
　　ctx.shadowOffsetY=-20;//设置上侧阴影在 20 像素处，=20为下像素
　　var grd=ctx.createRadialGradient(0,0,170,0);//创建线性的渐变对象，渐变开始圆x,y,r结束圆x,y,r
　　var grd=ctx.createLinearGradient(0,0,170,0);//创建线性的渐变对象，渐变开始点x,y结束点x,y
　　　　grd.addColorStop(0,"black");//向渐变对象添加颜色
　　　　grd.addColorStop(1,"white");
　　　　ctx.fillStyle=grd;//使用渐变对象

　　//画线
　　ctx.moveTo(0,0);//将画笔移动到00点
　　ctx.lineTo(800,600); //画线到800，600的坐标
　　ctx.stroke();//执行画线
　　//画块
　　ctx.beginPath(); //清空子路径，一般用于开始路径的创建
　　ctx.strokeStyle = "red";
　　ctx.moveTo(300,300);
　　ctx.lineTo(0,595); //画线到0,300的位置
　　ctx.lineTo(595,595); //画线到右下角
　　ctx.closePath(); //闭合
　　ctx.fillStyle="lightgreen"; //设置填充颜色
　　ctx.fill(); //执行填充
　　//画图
　　ctx.strokeRect(0,0,600,600);//画一个空心的矩形，
　　ctx.fillRect(200,200,200,200);//画一个实心矩形
　　ctx.arc(300,300,200,0,Math.PI,false);//画一段圆弧,300,300是圆心，200是半径，0是超始角度，Math.PI是结束角度,是否逆时钟
　　ctx.closePath();//闭合
　　ctx.arc(300,300,100,0,Math.PI*2,false);//画一个空心的圆，
　　ctx.fill();//执行填充
　　ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);//截取image图像或html元素以sx,sy为左上角坐标，宽度为sw,高度为sh的一块矩形区域绘制到画布上以dx,dy坐标位置，图像宽度是dw,高度是dh
　　//画字
　　ctx.font='italic bolder 48px 黑体';//设置字体
　　ctx.strokeText(text,x,y,[maxWidth]);//text表示绘制空心字，x,y表示横，纵坐标，可选文字的最大宽度参数，防止文字显示溢出
　　ctx.fillText(text,x,y,[maxWidth]);//text表示绘制实心字，x,y表示横，纵坐标，可选文字的最大宽度参数，防止文字显示溢出
　　//清除数据
　　ctx.clearRect(250,250,100,100); //清除指定的矩形区域
　　//动态
　　ctx.rotate(20*Math.PI/180);//旋转 20 度
　　ctx.scale(2,2);//放大到 200%
　　ctx.translate(70,70);//重新映射画布上的 (0,0) 位置
　　ctx.transform(1,0.5,-0.5,1,30,10);//水平缩放绘图。水平倾斜绘图。垂直倾斜绘图。垂直缩放绘图。水平移动绘图。垂直移动绘图