利用canvas生成Material design风格的头像:md-avatar
利用canvas生成Material design风格的头像:md-avatar
install
bower install md-avatar
usage
new mdAvatar(options); // It will return a canvas dom element. new mdAvatar({ size: 100, text: 'S' }); // <canvas width="100" height="100"> new mdAvatar({ size: 64, text: 'G' }).toDataURL(); // data:image/png;base64,.......
options
-
target (default:null)
The ID of target canvas, or you can pass a canvas dom. If this field not provide, it will return a new canvas element bydocument.createElement('canvas').
-
size (default:32)
The size of avatar(canvas).
-
text (default:?)
The text in avatar. You can pass a string in to this field, but it will only take the FIRST char.
-
textColor (default:white)
The color of text.
-
textSize (default:this.size / 2)
The size of text.
-
textAlign (default:center)
-
textBaseline (default:middle)
-
fontFamily (default:sans-serif)
-
bgColor (default: depend onthis.text)
The avatar's background color. By default, it contains color patterns(500) in Material Design Color. And the color's default value is depend onthis.text(not random).