canvas和 svg（画布）

<canvas> 元素用于图形的绘制，通过脚本（通常是JavaScript) 来完成

定义位图SVG定义为可缩放  不需要使用js全部 标签来进行绘制

区别：

   svg不需要使用js canvas需要js

    svg设计出来的图像是矢量图 （放大不失帧） canvas绘制位图 （放大会失帧）

canvas 

如果不设置宽高 则默认宽高为300*150

fillRect（x，y,width,height)

x,y  在画布上边 矩形左上角的坐标位置

width 矩形宽高

height 矩形宽高

fillStyle

该属性可以设置css颜色 渐变或者图形

strokStyle

描边样式

strokeRect(x,y,width,height)

   x, y 在画布上边 矩形左上角的坐标位置

width 矩形的宽度

height 矩形的高度

arc(x,y,r,aAngle,eAngle,counterclockwise)   绘制一个圆

x,y 圆心坐标

aAngle 起始角度

eAngle 结束角度

counterclockwise 可选项 规定了顺时针或者是逆时针旋转 False = 顺时针，true = 逆时针

stroke()

空心的绘制

fill（）实心的绘制

beginPath（） 开始绘制新的路径

绘制直线

 定义开始坐标和结束坐标

需要使用stroke（） 方法来绘制线条

moveTo （）

把路径移动到画布中指定点  不创建线条

lineTo（）

添加一个新点  然后再画布中创建从该点到原指定点的线条

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

绘制椭圆

 x ，y 圆形坐标

radiusX ， radiusY  x轴半径 y轴半径

rotation   旋转角度

startAngle, endAngle 起始角度 结束角度

anticlockwise 可选参数 规定顺时针或者逆时针旋转 False = 顺时针，true = 逆时针

二次方贝塞尔曲线

quadraticCurveTo(cpx,cpy,x,y)

使用二次方贝塞尔曲线可以用来表示当前曲线指定控制点 向当前路径添加对应的点坐标

里边四个参数

cpx  贝塞尔曲线x坐标

cpy  贝塞尔曲线y坐标

x   结束点x 坐标

y  结束点y坐标

如果路径不存在 我们需要使用begin Path（）和moveTo（）定义开始点

 

三次方贝塞尔曲线

beizaierCurveTo（cpx1,cpy1,cpx2,cpy2,x,y）

里边六个参数

cpx1,cpy1    第一次贝塞尔曲线控制点x,y坐标

cpx2,cpy2   第二次贝塞尔曲线控制点x,y坐标

x ，y结束点x,y坐标 

绘制  文字

 绘制实心    fillText("text" x ,y)

绘制空心    strokeText（"text"，x ,y)