Canvas画布、SVG图片

Canvas

一、canvas

1.<canvas>标签：画布标签 （height，width，半透明），本身不具备绘图能力，可以通过脚本（通常指js）来实现

width：设置画布宽度，默认为300px
height：设置画布高度，默认为150px
注意：不能通过css设置画布大小！

2.Canvas API：提供通过JavaScript在<canvas>上绘图的功能 -- 动画、游戏画面、数据可视化、图片编辑以及实现视频处理等方面

3.Canvas API主要实现2D效果，3D效果需要由WebGL API实现

二、基本图形绘制

1.canvasOBJ.getContext（“2d”）：返回一个用来在画布上绘图的方法和属性的对象

//获取canvas标签
    var canvas = document.querySelector("canvas");
    //获取context对象  --  绘图属性和方法
    var ctx = canvas.getContext("2d");

2.ctx.beginPath():开始/重新绘制路径

3.ctx.closePath():结束绘制路径

4.ctx.moveTo（x，y）：设置路径的起点

5.ctx.lineTo(x,y):设置路径的另一个点

6.ctx.stroke():绘制路径（空心）

7.ctx.fill():填充路径