流水账系列之Canvas基础-01

canvas基础

<canvas width="600" height="300" id="canvas">
  请选择支持canvas的浏览器
</canvas>
复制代码

// 获取canvas引用
const canvas = document.getElementById('canvas')
// 获取绘图上下文
const ctx = canvas.getContext('2d')
// 使用绘图上下文在canvas元素上绘制
ctx.font = '38px Arial'
ctx.fillText(
    'Hello Canvas',
    canvas.width / 2 - 120, canvas.height / 2
)
复制代码

Canvas尺寸

默认canvas元素大小是300x150像素

两套Canvas尺寸

• 元素本身大小
• 元素绘图表面大小

两套尺寸的对应关系

当 元素本身大小 不符合 元素绘图表面大小时，浏览器就会对绘图表面进行缩放，使其符合其元素本身大小

修改Canvas尺寸

• 设置元素的width和height

同时修改元素本身大小和元素绘图表面大小

<canvas width="600" height="300"></canvas>
复制代码

• 通过css修改width和height

只修改元素本身大小，元素绘图表面大小还是300x150像素

会对绘图表面大小进行放大2倍，使其符合元素本身大小

<canvas id="canvas2" style="width: 600px;height: 300px;"></canvas>
复制代码

对比两种修改Canvas尺寸

Canvas的Api

属性

属性	描述
width	宽
height	高

方法

方法	描述
getContext()	返回绘图上下文
toDataUR()	返回数据地址
toBlob()	返回一个Canvas元素图像文件的Blob

Canvas绘图环境

CanvasRenderingContext2D

Canvas状态的保存及恢复

保存和恢复当前canvas绘图环境的所有属性

ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 80, 80)  // red

ctx.save()  // 保存
ctx.fillStyle = 'blue'
ctx.fillRect(10, 100, 80, 80)   // blue
ctx.restore()   // 恢复

ctx.fillRect(10, 200, 80, 80)   // red
复制代码

支持嵌套

ctx.fillStyle = 'red'
ctx.fillRect(200, 10, 40, 40)   // red

ctx.save()  // 保存1

ctx.fillStyle = 'blue'
ctx.fillRect(200, 60, 40, 40)   // blue

ctx.save()      // 保存2
ctx.fillStyle = 'pink'
ctx.fillRect(200, 110, 40, 40)  // pink
ctx.restore()   // 恢复到保存2

ctx.fillRect(200, 160, 40, 40)  // blue

ctx.restore()   // 恢复到保存1

ctx.fillRect(200, 210, 40, 40)  // red
复制代码

window坐标转换成Canvas坐标

const windowToCanvas = (canvas, event) => {
  const { clientX, clientY } = event
  const { left, top } = canvas.getBoundingClientRect()
  return {
    x: clientX - left,
    y: clientY - top
  }
}
复制代码

Canvas绘制模式

Canvas元素采用立即模式来绘制图形的，立即将所指定的内容绘制在Canvas上，然后立马忘记刚才绘制内容

常见canvas变化绘制方法

• 调用ctx.clearRect()进行清屏，然后重绘
• 使用ctx.getImageData()和ctx.putImageData()进行保存及恢复

demo06

saveDrawingSurface(){
  const { ctx } = this
  const { canvas } = ctx
  this.defaultCanvasImage = ctx.getImageData(
    0, 0,
    canvas.width, canvas.height
  )
},
restoreDrawingSurface () {
  const { ctx } = this
  ctx.putImageData(
    this.defaultCanvasImage,
    0, 0
  )
},
handleMouseDown () {
    // 保存绘图环境的绘图表面
    this.saveDrawingSurface()
},
handleMouseMove (e) {
    // 恢复绘图表面
    this.restoreDrawingSurface()
},
handleMouseUp () {
    this.restoreDrawingSurface()
}
复制代码

打印Canvas

离屏Canvas

Canvas坐标系统

默认坐标系统

变换坐标系统

• 平移
• 旋转
• 缩放
• 自定义变换方式

Canvas绘制模型