基础信息说明

功能概述：创建画布、进行2D/WebGL绘图、并将绘制结果导出为图片数据或临时文件。

项目	说明
版本要求	无
前提条件	无
使用限制	无
相关教程	无

方法说明

方法名	签名	同步/异步	说明
document.getElementById('canvas')	document.getElementById('canvas'): Canvas	同步	创建主屏 Canvas（单例）
document.createElement('canvas')	document.createElement('canvas'): Canvas	同步	创建离屏 Canvas（默认 2D）
Canvas.getContext	Canvas.getContext(string contextType, Object contextAttrs?): RenderingContext	同步	获取画布对象的绘图上下文（2D/WebGL）
Canvas.toTempFilePath	Canvas.toTempFilePath(Object option): void	同步发起，回调异步	将当前 Canvas 保存为一个临时文件
Canvas.toDataURL	Canvas.toDataURL(String type?, Number encoderOptions?): String	同步	把画布上的绘制内容以一个 data URI 的格式返回

参数说明

document.getElementById('canvas')

返回主屏 Canvas，内部保证单例，多次调用返回同一实例

document.createElement('canvas')

返回新的离屏 Canvas（默认 2D 使用），每次调用都会创建独立实例
离屏 Canvas 支持设置宽高；主屏 Canvas 设置宽高通常不生效

Canvas.width / Canvas.height

属性名	类型	必填	说明
width	Number	否	画布宽度，单位 px；离屏可设置
height	Number	否	画布高度，单位 px；离屏可设置

Canvas.getContext(string contextType, Object contextAttrs = {})

属性名	类型	必填	说明
contextType	String	是	支持 '2d'（离屏默认使用）与 'webgl'/'experimental-webgl'（主屏默认使用）；兼容 'webgl2'、'experimental-webgl2'
contextAttrs	Object	否	透传给底层的上下文参数；当 contextType='webgl' 且未显示设置 antialias 时，默认 false

Canvas.toTempFilePath(Object option = {})

内部会将截图转为 Base64 后写入临时文件，并回调返回 tempFilePath

属性名	类型	必填	说明
x	Number	否	默认 0，截取区域左上角 x 坐标
y	Number	否	默认 0，截取区域左上角 y 坐标
width	Number	否	默认 canvas.width，截取区域宽度
height	Number	否	默认 canvas.height，截取区域高度
destWidth	Number	否	默认 canvas.width，导出文件宽度（会按比例缩放截取内容）
destHeight	Number	否	默认 canvas.height，导出文件高度（会按比例缩放截取内容）
fileType	String	否	默认 'png'，导出文件类型
quality	Number	否	默认 1，导出质量（仅对jpg/webp格式图片生效）
success	Function	否	成功回调，入参 { tempFilePath }
fail	Function	否	失败回调，入参 { errMsg, errCode }
complete	Function	否	结束回调，入参同 success/fail

Canvas.toDataURL(String type = 'image/png', Number encoderOptions)

属性名	类型	必填	说明
type	MIME	否	如 image/png、image/jpeg
quality	Number	否	图片质量 0~1（仅对jpg、webp格式图片生效）

返回值说明

接口	返回值类型	说明
document.getElementById('canvas')	Canvas	返回主屏 Canvas 实例（单例）
document.createElement('canvas')	Canvas	返回新的离屏 Canvas 实例
Canvas.width / Canvas.height	Number	画布宽高数值；离屏可设置
Canvas.getContext	CanvasRenderingContext2D\|WebGLRenderingContext	2D 或 WebGL 1.0 渲染上下文实例。
Canvas.toTempFilePath	void	无直接返回值，通过回调获取 tempFilePath
Canvas.toDataURL	String	DataURL 字符串（data:image/...;base64,...）

回调结果说明

Canvas.toTempFilePath

回调	触发时机	回调参数	说明
success	写入临时文件成功	{ tempFilePath }	tempFilePath 已做路径映射
fail	写入临时文件失败	{ errMsg, errCode }	errCode 由底层返回
complete	成功或失败后都会触发	同 success / fail	-

示例代码

<canvas id="canvas" width="300" height="200" />

// 获取主屏 canvas 并绘制
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#ff6600'
ctx.fillRect(0, 0, 100, 100)

// 导出为临时文件
canvas.toTempFilePath({
  fileType: 'png',
  quality: 0.9,
  success({ tempFilePath }) {
    console.log('saved to', tempFilePath)
  },
  fail(err) {
    console.error('save failed', err)
  }
})

// 创建离屏 canvas 并导出 DataURL
const offscreen = document.createElement('canvas')
offscreen.width = 200
offscreen.height = 200
const offCtx = offscreen.getContext('2d')
offCtx.fillStyle = '#3366ff'
offCtx.fillRect(50, 50, 100, 100)
const dataUrl = offscreen.toDataURL('image/png')
console.log('data url length', dataUrl.length)

上一篇:图片

下一篇:帧率

文档内容是否有帮助？

有帮助

无帮助