@huteming/ui-canvas-draw v2.1.5

封装 canvas 方法，主要是解决了 canvas 在不同分辨率中显示可能模糊的问题。并封装了一些原生方法，方便调用导出图片

引入

import { CanvasDraw } from '@huteming/ui'

代码演示

基础用法

const instance = new CanvasDraw(750, 1109)

// instance.onerror(console.error)
instance.add(({ context, canvas, ratio, width, height }) => {
    instance.drawText('hello world', 24, 93)
})

const src = instance.done('png')

高斯模糊

const instance = new CanvasDraw(750, 1109)

instance.add(({ context, canvas, ratio, canvasWidth, canvasHeight }) => {
    const x = 52
    const y = 424
    const width = 552
    const height = 177
    const r = '20 20 -20 -20'

    const blurryCanvas = instance.getBlurryArea(100, x, y, width, height)
    // 创建不规则区域然后将模糊图像渲染
    instance.drawRect(x, y, width, height, { r })
    context.clip()
    instance.drawImage(blurryCanvas, x, y, width, height)
    instance.drawRect(x, y, width, height, { r, color: 'rgba(255, 255, 255, 0.62)' })
})

const src = instance.done('png')

删除线

const instance = new CanvasDraw(750, 1109)

instance.add(() => {
    instance.drawText('<through>删除线</through>', x, y, optionsText)
})

const src = instance.done('png')

下划线

const instance = new CanvasDraw(750, 1109)

instance.add(() => {
    instance.drawText('<underline>下划线</underline>', x, y, optionsText)
})

const src = instance.done('png')

API

构造函数参数

实例方法

实例辅助绘图方法

optionsDone

optionsCanvas

optionsArc

optionsRect

optionsText

optionsLine