前端canvas 的一些方法记录

一些常用的操作方法

fillRect

fillRect (x,y,width,height) 绘制一个填充的矩形

strokeRect(    

 strokeRect(x,y,width,height) 绘制一个矩形边框

clearRect

clearRect(x,y,width,height) 清楚一块矩形区域

beginPath

 beginPath() 新建一条路径

closePath

 closePath() 闭合路径，重新指向上下文

stroke

stroke() 用线条绘制

fill

 fill() , 通过填充绘制内容生成实心图形

lineTo

 lineTo(x,y) ,绘制一条线

arc

 arc(x,y,radius,startAngle,endAngle,anticlockwise ) ,绘制一个圆

arcTo

 arcTo(x1,y1,x2,y2,)

fillStyle  

 fillStyle  设置图形的填充颜色

strokeStyle

strokeStyle 设置图案的轮廓

globalAlpha

 globalAlpha 设置全局的透明度 0-1

clip

 clip（）

 线的样式

lineWidth

lineWidth 设置线的宽度

lineCa

lineCap = type 设置线条末端样式

lineJoin

 lineJoin - type 设置线条间接处的样式

setlineDash

setlineDash() 设置虚线样式

getlineDash

getlineDash() 获取虚线样式

文本

 fillText(text ,x,y,[maxwidth])    

  strokeText(text,x,y,[maxwidth])

 font 文本样式

 textAlign 文本对齐方式

 textBaseline 基线对齐方式

direction 文本方向

 渐变

createLinearGradient(x1,y1,x2,y2) 渐变的起点和终点

 createRadialGradient(x1, y1, r1, x2, y2, r2) 方法接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

    gradient.addColorStop(position, color)  方法接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。 例如，0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值（如 #FFF，rgba(0,0,0,1)，等等）。
 

  var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);

  lineargradient.addColorStop(0, "white");

lineargradient.addColorStop(1, "black");

 阴影

 shadowOffsetX = float  用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

 shadowOffsetY  = float 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0。

 shadowBlur 

shadowBlur = float

shadowColor

 shadowColor = color    

 图片 有三种情况

drawImage(img , x, y )  

drawImage(img , x, y ,width ,height)    

drawImage(img , x, y ,width ,height , dx, dy, dwidth, dheight)    

变形

translate(x,y) 方法 用来做位移

rotate(angle) 方法 用来做循环

scale(x,y) 用来做缩放

 组合

  globalCompositeOperation 这个属性设定了在画新图形时采用的遮盖策略，其值是一个标识 12 种遮盖方式的字符串。

 状态保存和恢复

 save() 保存

         strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY,shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled

restore 恢复    恢复上一次save 保存前