summer

install

yarn add summer-canvas

example

.html
<canvas id="canvas"></canvas>

.js

import Summer from 'summer-canvas'

const shareCanvas = new Summer({
    ratio: 1,
    canvasId: 'canvas',
    canvasWidth: 343,
    canvasHeight: 'auto',
    radius: 30,
    tasks: [
        {
            type: 'rect',
            id: 'top_cicle_border',
            radius: 80,
            x: 90,
            y: 0,
            width: 162,
            height: 162,
            background: {
                color: 'linear(to s, 0 #fff7be, 100% #f9b71c)'
            }
        }
    ]
})

shareCanvas.draw((img: string, size: { width: string, height: string }) => {

})

method

1. new Summer(SummerOptions)
2. draw(doneCallback)
3. addDraw(ElementOptions)

options

SummerOptions

option | type | description -| - | - | canvasId | string | canvas element id canvasWidth | number | canvasHeight | 'auto' tasks | (ImgOptions | RectOptions | TextOptions | WrapOptions)[] ratio? | number | set in a variety of sizes border? | BorderOptions background? | BackgroundOptions radius? | number

ImgOptions extends TaskBaseOptions

option | type | description -| - | - | type | 'img' | width | number | height? | number | img | ImgInfoOptions | string | mode? | 'contain' | 'cover' | 'fill' | backgroundColor? | string | shadow? | BoxShadowOptions | border? | BorderOptions |

RectOptions extends TaskBaseOptions

option | type | description -| - | - | type | 'rect' border? | BorderOptions background? | BackgroundOptions shadow? | BoxShadowOptions

TextOptions extends TaskBaseOptions

option | type | description -| - | - | type | 'text' text | string width? | number fontSize? | number lineHeight? | number maxLine? | number lastLineLeastNum? | number color? | string background? | BackgroundOptions radius? | number border? | BorderOptions padding? | PaddingOptions fontWeight? | 'normal' | 'lighter' | 'bold' | number textAlign? | 'left' | 'center' | 'right' | 'start' | 'end'

WrapOptions extends TaskBaseOptions

option | type | description -| - | - | type | 'wrap' width? | number height? | number | 'auto' background? | BackgroundOptions radius? | number padding? | number border? | BorderOptions tasks | (ImgOptions | RectOptions | TextOptions | WrapOptions)[]

TaskBaseOptions

option | type | description -| - | - | id | string hidden? | boolean x? | number y? | number dependOn? | DependOnOptions last? | LastTaskOptions

BackgroundOptions

option | type | description -| - | - | color? | string image? | string mode? | 'fill' | 'cover' | 'contain'

DependOnOptions

option | type | description -| - | - | id | string direction | 'cross' | 'vertical' margin | number

LastTaskOptions

option | type | description -| - | - | margin | number

PaddingOptions

option | type | description -| - | - | left? | number top? | number right? | number bot? | number

ImgInfoOptions

option | type | description -| - | - | img | HTMLImageElement width | number height | number

BoxShadowOptions

option | type | description -| - | - | color? | string offsetX? | number offsetY? | number blur? | number

BorderOptions

option | type | description -| - | - | width | number color | string