【JavaScript】使用canvas根据人名生成随机头像

最新推荐文章于 2024-05-14 09:45:54 发布

liouozm

最新推荐文章于 2024-05-14 09:45:54 发布

阅读量3.1k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript canvas html

本文链接：https://blog.csdn.net/mwqyykl/article/details/102465534

版权

经常在一些网站上观察到，刚注册的用户未修改头像时，通常使用默认的头像。当网站比较正式比如：google等等会使用昵称首字或者名字作为头像。这样简单的图片生成，直接使用前端语言随机生成给服务器减负、非常高效。
孝顺的我立马给爸爸生成一个头像，双十一快来了，请爸爸眷顾我！
在这里插入图片描述 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019100916584798.png
那么怎么使用canvas来完成呢？
首先建立一个展示页面：


```java
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据用户名生成头像</title>
    <script src="js/main.js"></script>
</head>
<body>
    <img src="" style="border-radius: 50%;" id="userAvatar">
    <canvas id="avatarCanvas" style="display:none"></canvas>
</body>
    <script type="text/javascript">
        var username = "马";
        generatorAvator(username,60,null,"avatarCanvas","userAvatar");
    </script>
</html>

generatorAvator是生成头像的主要函数，参数包括：用户名，头像大小，头像canvas，头像展示容器。
js代码如下：

/**
 * usernmae : 用户名 默认为无
 * size ：头像大小 默认为 30
 * color ：字体颜色
 * canvasId ：canvas容器的id
* */
function generatorAvator(username,size,bgcolor,canvasId,avatarContainerId){
   
    //设置头像昵称，如果为null或者为空时，设置为无
    var nickname = username==null?"无":username==""?"无":username;
    //设置头像大小
    var avatarSize = size

最低0.47元/天解锁文章

liouozm

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】使用canvas根据人名生成随机头像

经常在一些网站上观察到，刚注册的用户未修改头像时，通常使用默认的头像。当网站比较正式比如：google等等会使用昵称首字或者名字作为头像。这样简单的图片生成，直接使用前端语言随机生成给服务器减负、非常高效。孝顺的我立马给爸爸生成一个头像，双十一快来了，请爸爸眷顾我！那么怎么使用canvas来完成呢？首先建立一个展示页面：```java<!DOCTYPE html>&l...
复制链接

扫一扫