CANVAS 绘画

基础绘画

路径开始和关闭

• beginPath()
• closePath()

起始点

• moveTo()

划线

• lintTo()

矩形

• rect(x,y,w,h) 矩形路径
• strokeRect(x,y,w,h) 描边矩形
• fillRect(x, y, w, h) 填充矩形
• clearRect(x, y, w, h) 清除矩形

弧

• arc(x,y,r,startAngle, endAngle, true/false)

文字

• strokeText(text, x, y) 描边文字
• fillText(text, x, y) 填充文字
• measureText(text) 求文字的宽度
• font 属性 12px 字体 bold italic 12px 字体
• textAlign 属性 水平对齐方式
• textBaseline 属性 垂直对齐方式

描边

• stroke() 描边路径
• strokeStyle 属性 设置描边颜色
• lineWidth 属性 设置描边宽度

填充

• fill() 填充路径
• fillStyle 填充颜色

绘制图片

• 基本绘图 drawImage(img, x, y)
• 绘图并设置大小 drawImage(img, x, y, w, h)
• 裁剪图片 drwaImage(img, sx, sy, sw, sh, x, y, w, h) 先写原图的左边大小，在写画布的坐标大小

高级绘画

阴影

• shadowColor 属性 阴影颜色
• shadowBlur 属性 模糊值
• shadowOffsetX 属性 水平方向的偏移量
• shadowOffsetY 属性 垂直方向的偏移量

渐变

线性渐变

• createLinearGradient(x0, y0, x1, y1);
• graObj.addColorStop(位置， 颜色) 位置是0~1之间的小数

径向渐变

• createRedialGradient(x0, y0, r0, x1, y1, r1);
• graObj.addColorStop(位置， 颜色)

填充背景

• createPattern(img, repeat) 第二个参数是填充方式
  • repeate
  • repeate-x
  • repeate-y
  • no-repeate
• 填充对象跟渐变对象类似，相当于一种颜色

变换-缩放

• scale(w, h)

变换-位移

• translate(w, h)

变化-旋转

• rotate(angle) 弧度

绘图环境的保存和释放

• save() 保存当前的绘图环境
• restore() 释放前面保存的绘图环境

转载于:https://my.oschina.net/u/3502339/blog/1058173