"JavaScript 문자 아바타 구현"의 두 판 사이의 차이

 
(사용자 2명의 중간 판 22개는 보이지 않습니다)
2번째 줄: 2번째 줄:
;JavaScript 문자 아바타 구현
;JavaScript 문자 아바타 구현


<source lang='html'>
<syntaxhighlight lang='html' run>
<style>
<style>
     .lavatar {
     .lavatar {
14번째 줄: 14번째 줄:
     }
     }
</style>
</style>
<body></body>


<script src='//cdn.rawgit.com/zenozeng/color-hash/master/dist/color-hash.js'></script>
<script type="module">
<script>
    import ColorHash from 'https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js';
     var colorHash = new ColorHash({
 
        lightness: 0.5,
     var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7});
        saturation: 0.7
    });


     function showLavatar(username) {
     function showLavatar(username) {
35번째 줄: 34번째 줄:
     showLavatar("석삼");
     showLavatar("석삼");
</script>
</script>
 
</syntaxhighlight>
</source>
<jsfiddle>gpvtxwoh</jsfiddle>


==같이 보기==
==같이 보기==
* [[jQuery 문자 아바타 구현]]
* [[identicon.js 튜토리얼]]
* [[문자 아바타]]
* [[문자 아바타]]


[[분류: JavaScript]]
[[분류: JavaScript]]
[[분류: 아바타]]

2021년 9월 15일 (수) 02:27 기준 최신판

1 개요[ | ]

JavaScript 문자 아바타 구현
html
Copy
<style>
    .lavatar {
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 24px;
        text-align: center;
        color: #fff;
        float: left;
    }
</style>
<body></body>

<script type="module">
    import ColorHash from 'https://cdnjs.cloudflare.com/ajax/libs/color-hash/2.0.1/esm.min.js';

    var colorHash = new ColorHash({lightness: 0.5, saturation: 0.7});

    function showLavatar(username) {
        var color = colorHash.hex(username);
        var initial = username.charAt(0);
        document.write("<div class='lavatar' style='background:" + color + "'>" + initial + "</div>");
    }

    showLavatar("Alice");
    showLavatar("Bob");
    showLavatar("Carol");
    showLavatar("한놈");
    showLavatar("두시기");
    showLavatar("석삼");
</script>

2 같이 보기[ | ]