离屏canvas

一、概念

离屏canvas是在内存中创建一个canvas元素，未通过dom操作显示到页面上去

二、场景

1. 用于需频繁调用canvas API
2. 底部背景（canvas绘制的）不需要改变的
3. 批量上传图片，web端压缩
4. web绘制图片，本地保存

三、用法

1. 创建一个canvas元素
2. web绘制所需图形
3. 通过canvas API drawImage方法绘制到页面canvas上去显示

四、代码展示

function animate(y, isDown){
ctx.clearRect(0, 0, 200, 200)
var canvas = document.createElement(‘canvas’)
canvas.width = 200
canvas.height = 200
var ctx1 = canvas.getContext(‘2d’)
ctx1.arc(40, 40, 40, 0, 2 * Math.PI)
ctx1.clip()
ctx1.filStyle = ‘rgba(0, 255, 255, .2)’
ctx1.fillRect(0, 0, 80, 80)
ctx1.clearRect(0, 0, 80, y)

ctx1.beginPath()
ctx1.strokeStyle = ‘rgba(0, 255, 255, 1)’
ctx1.moveTo(0, y)
ctx1.lineTo(80, y)
ctx1.closePath()
ctx1.stroke()

ctx.drawImage(canvas, 0, 0)
}

五、优点

1. 提供性能（离屏canvas的操作都是在内存中进行并且离屏canvas的任何操作都不会导致页面变(重绘、重排)）
2. 减少冗余操作