qq.createCanvas

Canvas qq.createCanvas()

创建一个画布对象。首次调用创建的是显示在屏幕上的画布，之后调用创建的都是离屏画布。

返回值

Canvas

画布对象

Canvas

画布对象

属性

number width

画布的宽度

number height

画布的高度

方法

string Canvas.toTempFilePath(Object object)

将当前 Canvas 保存为一个临时文件。

RenderingContext Canvas.getContext(string contextType, Object contextAttributes)

获取画布对象的绘图上下文

string Canvas.toDataURL()

把画布上的绘制内容以一个 data URI 的格式返回

.toTempFilePathSync

Canvas.toTempFilePathSync(Object object)

Canvas.toTempFilePath 的同步版本

参数

Object object
属性类型默认值必填说明
xnumber0否截取 canvas 的左上角横坐标
ynumber0否截取 canvas 的左上角纵坐标
widthnumbercanvas 的宽度否截取 canvas 的宽度
heightnumbercanvas 的高度否截取 canvas 的高度
destWidthnumbercanvas 的宽度否目标文件的宽度，会将截取的部分拉伸或压缩至该数值
destHeightnumbercanvas 的高度否目标文件的高度，会将截取的部分拉伸或压缩至该数值
fileTypestringpng否目标文件的类型
qualitynumber1.0否jpg图片的质量，仅当 fileType 为 jpg 时有效。取值范围为 0.0（最低）- 1.0（最高），不含 0。不在范围内时当作 1.0

object.fileType 的合法值

值说明
jpgjpg 文件
pngpng 文件

示例代码

Canvas.toTempFilePath

  1. canvas.toTempFilePath({
  2.   x: 10,
  3.   y: 10,
  4.   width: 200,
  5.   height: 150,
  6.   destWidth: 400,
  7.   destHeight: 300,
  8.   success: (res) => {
  9.     qq.shareAppMessage({
  10.       imageUrl: res.tempFilePath
  11.     })
  12.   }
  13. })

Canvas.toTempFilePathSync

  1. const tempFilePath = canvas.toTempFilePathSync({
  2.   x: 10,
  3.   y: 10,
  4.   width: 200,
  5.   height: 150,
  6.   destWidth: 400,
  7.   destHeight: 300
  8. })
  9. qq.shareAppMessage({
  10.   imageUrl: tempFilePath
  11. })

.toTempFilePath

string Canvas.toTempFilePath(Object object)

将当前 Canvas 保存为一个临时文件。

参数

Object object
属性类型默认值必填说明
xnumber0否截取 canvas 的左上角横坐标
ynumber0否截取 canvas 的左上角纵坐标
widthnumbercanvas 的宽度否截取 canvas 的宽度
heightnumbercanvas 的高度否截取 canvas 的高度
destWidthnumbercanvas 的宽度否目标文件的宽度，会将截取的部分拉伸或压缩至该数值
destHeightnumbercanvas 的高度否目标文件的高度，会将截取的部分拉伸或压缩至该数值
fileTypestringpng否目标文件的类型
qualitynumber1.0否jpg图片的质量，仅当 fileType 为 jpg 时有效。取值范围为 0.0（最低）- 1.0（最高），不含 0。不在范围内时当作 1.0
successfunction否接口调用成功的回调函数
failfunction否接口调用失败的回调函数
completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

object.fileType 的合法值

值说明
jpgjpg 文件
pngpng 文件

返回值

string

canvas 生成的临时文件路径

示例代码

Canvas.toTempFilePath

  1. canvas.toTempFilePath({
  2.   x: 10,
  3.   y: 10,
  4.   width: 200,
  5.   height: 150,
  6.   destWidth: 400,
  7.   destHeight: 300,
  8.   success: (res) => {
  9.     qq.shareAppMessage({
  10.       imageUrl: res.tempFilePath
  11.     })
  12.   }
  13. })

Canvas.toTempFilePathSync

  1. const tempFilePath = canvas.toTempFilePathSync({
  2.   x: 10,
  3.   y: 10,
  4.   width: 200,
  5.   height: 150,
  6.   destWidth: 400,
  7.   destHeight: 300
  8. })
  9. qq.shareAppMessage({
  10.   imageUrl: tempFilePath
  11. })

.toDataURL

string Canvas.toDataURL()

把画布上的绘制内容以一个 data URI 的格式返回

返回值

string

data URI 格式的字符串

.getContext

RenderingContext Canvas.getContext(string contextType, Object contextAttributes)

获取画布对象的绘图上下文

参数

string contextType

上下文类型

contextType 的合法值

值说明
2d2d 绘图上下文
webglwebgl 绘图上下文
Object contextAttributes

webgl 上下文属性，仅当 contextType 为 webgl 时有效

属性类型默认值必填说明
antialiasbooleanfalse否表示是否抗锯齿
preserveDrawingBufferbooleanfalse否表示是否绘图完成后是否保留绘图缓冲区
antialiasSamplesnumber2否抗锯齿样本数。最小值为 2，最大不超过系统限制数量，仅 iOS 支持

返回值

RenderingContext

绘图上下文

RenderingContext

画布对象的绘图上下文。

  • 通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象，实现了 HTML Canvas 2D Context画布 - 图1 定义的大部分属性、方法。
  • 通过 Canvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象，实现了 WebGL 1.0画布 - 图2 定义的所有属性、方法、常量。

2d 接口支持情况

iOS/Android 不支持的 2d 属性和接口

  • globalCompositeOperation 不支持以下值： source-in source-out destination-atop lighter copy。如果使用，不会报错，但是将得到与预期不符的结果。
  • isPointInPath
  • isPointInStroke
  • setLineDash
  • getLineDash
  • lineDashOffset
  • shadowColor
  • shadowBlur
  • shadowOffsetX
  • shadowOffsetY

WebGL 接口支持情况

压缩纹理的支持

  • iOS 支持 pvr 格式
  • Android 支持 etc1 格式