canvas

canvas:画布

画布大小默认300*150(宽高)

canvas画布有一个坐标轴  坐标远点0,0  位置在左上角  坐标系水平向右为正 垂直向下为正。

设置canvas宽高不用到style 中设置，可以直接在行内设置；

canvas操作

-------------加括号的是方法，不加括号为属性---------------------

//第一步  获取画布

//第二部 回执环境

//getContext("2d") 获取canvas回执环境  参数必须传入且为 2d

//moveTo(x,y) 设置绘制线段的起点 (用于表示一条新线的绘制)

    lineTo(x,y) 绘制线段到指定点   ()

      如果是第一条线,可以不使用moveTo 而直接 lineTo 否则建议一律使用moveTo

//stroke() 描边(绘制)

设置样式

//lineWhidth  设置线宽  ctx.lineWidth = 10  ；strokeStyle  设置描边样式  接受所有颜色类型

       lineJoin 设置线段交汇处样式  接受bevel(斜角)round(圆角)miter(尖角)

       lineCap 设置线帽(只在端点处有效) butt无(默认) round 圆帽  square方帽

###所有属性都要写在生成新图之前

//closePath 闭合路径  将当前正在绘制的路径闭合

//fill() 填充  填充的为团的闭合部分  如果没有手动闭合  会自动直线闭合

在新图前面没上beginPath()开始一条新路径的绘制，所有的样式都可以从新设置，与closePath没有一丁点的关系（也是在cavase中用的最多一个方法）

矩形属性

//fillRect(x,y,w,h) 填充矩形

//strokeRect(x,y,w,h)  描边矩形

//clearRect(x,y,w,h)  擦除 指定的区域  清除整个画布 clearRect(x,y,canvas.width,canvas.height)

圆弧属性

//arc(cx,cy,radius,startAngle,endAngle[,是否逆时针])  绘制弧度

//cx|cy 圆心坐标

//radius 半径

//startRadian|endRadian  开始|结束  弧度

文字属性

fillText(str,x,y) 填充文字

strokeText(str,x,y) 描边文字

font 文字属性 设置文字样式

textAligin 设置文字水平对齐方式

textBaseline 设置文字垂直对齐方式

绘图

绘图传入3-9 个参数, 分为为三大类

绘制图片 要求图片必须在加载完成之后

      drawImage(img,x,y) 图片有多大绘多大 (3个参数类型)

      drawImage(img,x,y,iw,ih) 将图片绘制到指定大小内  图片会压缩拉伸 (5个参数类型)

      drawImage(img,ix,iy,iw,ih,cx,cy,cw,ch) 由前四个参数决定从原图上指定位置剪下指定大小的图绘制到指定位置的画布上的指定的大小, 会压缩或拉伸图片(9个参数类型)

绘图信息的获取方法

颜色类

     getImageData(x,y,w,h) 获取指定范围内的像素信息(指定范围内 所有的信息都可以取到  并不是只有img可以)

     putImageData(imgData,x,y) 向指定范围内绘制像素信息

坐标轴

ctx.save():保存当前的位置

ctx.translate(横坐标,纵坐标) 平移

ctx.rotate(旋转角度) 旋转

ctx.restore():回复原位置

一般ctx.save()和ctx.restore()成对出现