这是什么？

小程序中的canvas操作封装，使其更易用，目前支持wx原生和Taro

适用场景：

• 绘制海报图片（支持引用远程图片）
• 实时更新海报内容
• 导出、下载
• 支持Offscreen Canvas

不适合：

• 动画
• 复杂的需求

TODO

• cantas.contextType 似乎只支持 '2d' ? 'webgl' 会报错

如何使用

npm i wx-canvas

Taro示例：获取canvas dom对象，并在其上绘制 一张远程图片 和 一段文字

function Poster(){
  
  // useReady 需要等到components ready 才能获取到 DOM
  useReady(async ()=>{
    // 如果是Taro环境，传入Taro对象，否则默认使用 wx
    // baseSize对应你设置的 <canvas> style.width，后续draw时传入的数值此为基准自动转换
    const $c = new WxCanvas({ Taro: Taro, baseSize : 500 })
    await $c.init({ id : 'poster', width: 2000, height : 1000 })
    // Offscreen Canvas
    // await $c.init({ compInst: this<the component to attach>,  width: 2000, height : 1000 })
    // 画一张图
    $c.drawImage(
      'https://tse3-mm.cn.bing.net/th/id/OIP-C.gRcZ-sVZdY741hyDj9ZpgwAAAA?pid=ImgDet&rs=1',
      // ImageParams
      { x:250, y:250, w:250, h:250 }
    )
    // 画一段文字，超出 lineNum x width 区域的会省略
    $c.drawText('弄范德萨发大撒范德萨发大水范德萨发大水范德萨',
      // TextParams
      { x:0, width:200, y:0, lineNum: 4, fontSize:40, lineHeight: 100, baseLine:'bottom' }
    )
    // 清空画布
    setTimeout(()=> $c.clear(), 3000 )
  })

  // canvasId & id 必须相同
  return <Canvas
    canvasId='poster'
    id='poster'
    type="2d"
    style={{ width: '500rpx', height: '500rpx' }}/>
}

References

async init():void

获取DOM并初始化，需在实例化后调用并等待完成才能开始draw

const $c = new WxCanvas('id')
await $wxCanvas.init()

drawText( String text, TextParams params = {} ):void

绘制文本

TextParams

| 字段名 | 类型 | 必填 | 描述 | | -------------- | ---------------- | ---- | ------------------------------------------------------------ | | x | Number(单位:rpx) | 是 | 坐标 | | y | Number(单位:rpx) | 是 | 坐标 | | fontSize | Number(单位:rpx) | 是 | 文字大小 | | color | String | 否 | 颜色 | | opacity | Int | 否 | 1为不透明，0为透明 | | lineHeight | Number(单位:rpx) | 否 | 行高 | | lineNum | Int | 否 | 根据宽度换行，最多的行数 | | width | Number(单位:rpx) | 否 | 没有指定为画布宽度 | | marginLeft | Number(单位:rpx) | 否 | 当text字段为Object可以使用，用来控制多行文字间距 | | marginRight | Number(单位:rpx) | 否 | 当text字段为Object可以使用，用来控制多行文字间距 | | textDecoration | String | 否 | 目前只支持 line-through（贯穿线），默认为none | | baseLine | String | 否 | top| middle|bottom基线对齐方式 | | textAlign | String | 否 | left|center|right对齐方式 | | zIndex | Int | 否 | 层级，越大越高 | | fontFamily | String | 否 | 小程序默认字体为'sans-serif', 请输入小程序支持的字体，例如：'STSong' | | fontWeight | String | 否 | 'bold'加粗字体，目前小程序不支持 100 - 900 加粗 | | fontStyle | String | 否 | 'italic'倾斜字体 |

drawImage( String url, ImageParams params = {} ):void

绘制图片

ImageParams

| 字段 | 类型 | 必填 | 描述 | | ------------ | ---------------- | ---- | ----------------------------------------- | | x | Number | 是 | 右上角的坐标 | | y | Number | 是 | 右上角的坐标 | | w | Number | 是 | 宽度 | | h | Number | 是 | 高度 | | mode | String | 否 | 填充模式，默认为 'cover' | | borderRadius | Number | 否 | 圆角，跟css一样 | | borderWidth | Number | 否 | 边框宽度 | | borderColor | String | 否 | 边框颜色 | | zIndex | Int | 否 | 层级，越大越高 |

drawBlock( BlockParams params = {} ):void

绘制方块

BlockParams

| 字段名 | 类型 | 必填 | 描述 | | --------------- | ---------------- | ---- | -------------------------------------- | | x | Number(单位:rpx) | 是 | 块的坐标 | | y | Number(单位:rpx) | 是 | 块的坐标 | | width | Number(单位:rpx) | 否 | 如果内部有文字，由文字宽度和内边距决定 | | height | Number(单位:rpx) | 是 | | | paddingLeft | Number(单位:rpx) | 否 | 内左边距 | | paddingRight | Number(单位:rpx) | 否 | 内右边距 | | borderWidth | Number(单位:rpx) | 否 | 边框宽度 | | borderColor | String | 否 | 边框颜色 | | backgroundColor | String | 否 | 背景颜色 | | borderRadius | Number(单位:rpx) | 否 | 圆角 | | text | Object | 否 | 块里面可以填充文字，参考texts字段解释 | | zIndex | Int | 否 | 层级，越大越高 |

drawLine( LineParams params = {} ):void

绘制直线

LineParams

| 字段 | 类型 | 必填 | 描述 | | ------ | ---------------- | ---- | -------------- | | startX | Number(单位:rpx) | 是 | 起始坐标 | | startY | Number(单位:rpx) | 是 | 起始坐标 | | endX | Number(单位:rpx) | 是 | 终结坐标 | | endY | Number(单位:rpx) | 是 | 终结坐标 | | width | Number(单位:rpx) | 是 | 线的宽度 | | color | String | 否 | 线的颜色 | | zIndex | Int | 否 | 层级，越大越高 |

Credit

Forked from taro-canvas