tencent cloud

文档反馈

画布概要

最后更新时间:2024-07-12 19:25:56

    createOffscreenCanvas

    该 API 使用方法为 OffscreenCanvas wx.createOffscreenCanvas(object object, number width, number height, Object this)
    功能说明:创建离屏 canvas 实例。
    参数及说明:
    number width:画布宽度。
    number height:画布高度。
    object this: 在自定义组件下,当前组件实例的 this
    object object
    属性
    类型
    默认值
    必填
    说明
    type
    string
    webgl
    创建的离屏 canvas 类型
    width
    number
    
    画布宽度
    height
    number
    
    画布高度
    compInst
    Component
    
    在自定义组件下,当前组件实例的 this
    object.type
    合法值
    说明
    webgl
    webgl类型上下文
    2d
    2d类型上下文

    createCanvasContext

    该 API 使用方法为 CanvasContext wx.createCanvasContext(string canvasId, Object this)
    功能说明:创建 canvas 的绘图上下文 canvasContext 对象。
    参数及说明:
    string canvasId:要获取上下文的<canvas>组件 canvas-id 属性。
    Object this:在自定义组件下,当前组件实例的 this,表示在这自定义组件下查找拥有 canvas-id 的 <canvas>,如果省略,则不在任何自定义组件内查找。
    返回值:canvasContext

    canvasToTempFilePath

    该 API 使用方法为 wx.canvasToTempFilePath(Object object, Object this)
    功能说明:把当前画布指定区域的内容导出,生成指定大小的图片,在 draw() 回调里调用该方法才能保证图片导出成功。
    参数及说明:Object object。
    属性
    类型
    默认值
    必填
    说明
    x
    number
    0
    指定的画布区域的左上角横坐标
    y
    number
    0
    指定的画布区域的左上角纵坐标
    width
    number
    canvas宽度-x
    指定的画布区域的宽度
    height
    number
    canvas高度-y
    指定的画布区域的高度
    destWidth
    number
    width*屏幕像素密度
    输出的图片的宽度
    destHeight
    number
    height*屏幕像素密度
    输出的图片的高度
    canvasId
    string
    -
    画布标识,传入 <canvas> 组件的 canvas-id
    fileType
    string
    png
    目标文件的类型
    quality
    number
    -
    图片的质量,目前仅对 jpg 有效。取值范围为 (0, 1],不在范围内时当作1.0 处理。
    success
    function
    -
    接口调用成功的回调函数
    fail
    function
    -
    接口调用失败的回调函数
    complete
    function
    -
    接口调用结束的回调函数(调用成功、失败都会执行)
    object.fileType 的合法值
    说明
    jpg
    jpg 图片
    png
    png 图片
    object.success 的 res 回调结果
    属性
    类型
    说明
    tempFilePath
    string
    生成文件的临时路径 (本地路径)
    示例代码:
    wx.canvasToTempFilePath({
    x: 100,
    y: 200,
    width: 50,
    height: 50,
    destWidth: 100,
    destHeight: 100,
    canvasId: 'myCanvas',
    success(res) {
    console.log(res.tempFilePath)
    }
    })

    canvasPutImageData

    该 API 使用方法为 wx.canvasPutImageData(Object object, Object this)
    功能说明:将像素数据绘制到画布,在自定义组件下,第二个参数传入自定义组件实例 this,以操作组件内canvas组件。
    参数1:Object object。
    属性
    类型
    默认值
    必填
    说明
    canvasId
    string
    -
    画布标识,传入 <canvas> 组件的 canvas-id 属性
    data
    Uint8ClampedArray
    -
    图像像素点数据,一维数组,每四项表示一个像素点的 rgba
    x
    number
    -
    源图像数据在目标画布中的位置偏移量(x 轴方向的偏移量)
    y
    number
    -
    源图像数据在目标画布中的位置偏移量(y 轴方向的偏移量)
    width
    number
    -
    源图像数据矩形区域的宽度
    height
    number
    -
    源图像数据矩形区域的高度
    success
    function
    -
    接口调用成功的回调函数
    fail
    function
    -
    接口调用失败的回调函数
    complete
    function
    -
    接口调用结束的回调函数(调用成功、失败都会执行)
    参数2:Object this,在自定义组件下,当前组件实例的 this,以操作组件内<canvas>组件。
    示例代码:
    const data = new Uint8ClampedArray([255, 0, 0, 1])
    wx.canvasPutImageData({
    canvasId: 'myCanvas',
    x: 0,
    y: 0,
    width: 1,
    data,
    success(res) {}
    })

    canvasGetImageData

    该 API 使用方法为 wx.canvasGetImageData(Object object, Object this)
    功能说明:获取 canvas 区域隐含的像素数据。
    参数1:Object object。
    属性
    类型
    默认值
    必填
    说明
    canvasId
    string
    -
    画布标识,传入<canvas>组件的canvas-id属性
    x
    number
    -
    将要被提取的图像数据矩形区域的左上角横坐标
    y
    number
    -
    将要被提取的图像数据矩形区域的左上角纵坐标
    width
    number
    -
    将要被提取的图像数据矩形区域的宽度
    height
    number
    -
    将要被提取的图像数据矩形区域的高度
    success
    function
    -
    接口调用成功的回调函数
    fail
    function
    -
    接口调用失败的回调函数
    complete
    function
    -
    接口调用结束的回调函数(调用成功、失败都会执行)
    object.success 回调函数参数:Object res。
    属性
    类型
    说明
    width
    number
    图像数据矩形的宽度
    height
    number
    图像数据矩形的高度
    data
    Uint8ClampedArray
    图像像素点数据,一维数组,每四项表示一个像素点的 rgba
    参数2:Object this,在自定义组件下,当前组件实例的 this,以操作组件内<canvas>组件。
    示例代码:
    wx.canvasGetImageData({
    canvasId: 'myCanvas',
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    success(res) {
    console.log(res.width) // 100
    console.log(res.height) // 100
    console.log(res.data instanceof Uint8ClampedArray) // true
    console.log(res.data.length) // 100 * 100 * 4
    }
    })

    Image

    功能说明:图片对象。
    参数及说明
    属性
    类型
    说明
    src
    string
    图片的 URL
    width
    number
    图片的真实宽度
    height
    number
    图片的真实高度
    referrerPolicy
    string
    origin:发送完整的referrer;no-referrer:不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html ,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;
    onload
    function
    图片加载完成后触发的回调函数
    onerror
    function
    图片加载发生错误后触发的回调函数

    ImageData

    功能说明:ImageData 对象。
    参数及说明
    属性
    类型
    说明
    width
    number
    使用像素描述 ImageData 的实际宽度
    height
    number
    使用像素描述 ImageData 的实际高度
    data
    Uint8ClampedArray
    一维数组,包含以 RGBA 顺序的数据,数据使用 0 至 255(包含)的整数表示

    canvasGradient

    功能说明:渐变对象。

    .addColorStop

    该 方法 使用方式为 CanvasGradient.addColorStop(number stop, Color color)
    功能说明:添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染,大于最大 stop 的部分会按最大 stop 的 color 来渲染,相当于CanvasGradient.addColorStop(number stop, Color color)。
    参数1:number stop,表示渐变中开始与结束之间的位置,范围0-1。
    参数2:Color color,渐变点的颜色。
    示例代码:
    const ctx = wx.createCanvasContext('myCanvas')
    
    // Create circular gradient
    const grd = ctx.createLinearGradient(30, 10, 120, 10)
    grd.addColorStop(0, 'red')
    grd.addColorStop(0.16, 'orange')
    grd.addColorStop(0.33, 'yellow')
    grd.addColorStop(0.5, 'green')
    grd.addColorStop(0.66, 'cyan')
    grd.addColorStop(0.83, 'blue')
    grd.addColorStop(1, 'purple')
    
    // Fill with gradient
    ctx.setFillStyle(grd)
    ctx.fillRect(10, 10, 150, 80)
    ctx.draw()

    RenderingContext

    功能说明:Canvas 绘图上下文。
    通过 Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D 对象,实现了 HTML Canvas 2D Context 定义的属性、方法。
    通过 Canvas.getContext('webgl') 或 OffscreenCanvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象,实现了 WebGL 1.0 定义的所有属性、方法、常量。
    详情请见 canvasContext

    OffscreenCanvas

    详情请见 OffscreenCanvas

    Path2D

    详情请见 Path2D

    Canvas

    详情请见 Canvas

    Color

    详情请见 Color
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持