import { extend } from '@Src/utils' ; const diff = ENV === 'node' ? require ( './node' ) . _Canvas : require ( './web' ) . _Canvas ; const extra = { getImage ( image ) { if ( typeof image === 'string' ) { return Canvas . loadImage ( image ) ; } else if ( typeof image === 'object' ) { return Promise . resolve ( image ) ; } else { return Promise . reject ( `getImage error, src=${ image }` ) ; } } , drawRoundRectPath ( ctx , width , height , radius ) { ctx . beginPath ( ) ; ctx . arc ( width - radius , height - radius , radius , 0 , Math . PI / 2 ) ; ctx . lineTo ( radius , height ) ; ctx . arc ( radius , height - radius , radius , Math . PI / 2 , Math . PI ) ; ctx . lineTo ( 0 , radius ) ; ctx . arc ( radius , radius , radius , Math . PI , Math . PI * 3 / 2 ) ; ctx . lineTo ( width - radius , 0 ) ; ctx . arc ( width - radius , radius , radius , Math . PI * 3 / 2 , Math . PI * 2 ) ; ctx . lineTo ( width , height - radius ) ; ctx . closePath ( ) ; } , drawRoundRect ( ctx , x , y , width , height , radius = 0 , fillColor = '#fff' , strokeWidth = 0 , strokeColor = '#000' ) { const minL = Math . min ( width , height ) ; if ( 2 * radius > minL ) radius = minL / 2 ; ctx . save ( ) ; ctx . translate ( x , y ) ; extra . drawRoundRectPath ( ctx , width , height , radius ) ; ctx . fillStyle = fillColor ; ctx . fill ( ) ; ctx . lineWidth = strokeWidth ; ctx . strokeStyle = strokeColor ; ctx . stroke ( ) ; ctx . restore ( ) ; } } ; export const Canvas = extend ( true , diff , extra ) as { create ( width , height ) : [ HTMLCanvasElement , CanvasRenderingContext2D ] ; loadImage ( image ) : Promise < HTMLImageElement > ; getImage ( image ) : Promise < HTMLImageElement > ; drawRoundRect ( ctx , x , y , width , height , radius ? , fillColor ? , strokeWidth ? , strokeColor ? ) : void ; } ;