pinguo-majianguang/summer-canvas

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