我怎么能生成多个头像？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我怎么能生成多个头像？相关的知识，希望对你有一定的参考价值。
由于我正在学习如何编码和使用canvas，我做这个项目是为了挑战自己，但得到了这个问题;我的一个朋友正在教我如何使用canvas，他设法从一个游戏中生成一个头像，使用它的API，我们使用一个输入表单来输入昵称，然后画出下面的头像，一切正常。但是我想在页面的其他地方也画出同样的头像，而只输入一次名字，这可能吗？如何多次生成这个头像
我们使用的代码如下。先谢谢你了o
<div id="info">
<table>
<tr>
<td class="left">Habbo Name:</td>
<td><input oninput="generateAvatar()" id="username" type="text"></td>
</tr>
<tr>
<td class="left">Hotel:</td>
<td>
<select id="hotel" name="select">
<option value=".com">.com</option>
<option value=".com.br" selected>Brazil</option>
<option value=".fi">Finland</option>
<option value=".es">Spain</option>
<option value=".it">Italy</option>
<option value=".nl">Netherlands</option>
<option value=".fr">France</option>
<option value=".de">Germany</option>
<option value=".tr">Turkey</option>
</select>
</td>
</tr>
</table>
<canvas id="User" width="150" height="100"></canvas>
<script>
var canvas = document.getElementById("User");
var ctx = canvas.getContext("2d");
var Head = new Image();
var Body = new Image();
function generateAvatar()
tUsername = document.getElementById("username").value;
tHotel = document.getElementById("hotel").value;
Head.src = "https://www.habbo"+tHotel+"/habbo-imaging/avatarimage?user="+tUsername+"&head_direction=3&img_format=gif&gesture=0&headonly=1";
Body.src = "https://www.habbo"+tHotel+"/habbo-imaging/avatarimage?img_format=gif&user="+tUsername+"&action=std&airection=2&head_direction=2&gesture=sml&size=s";
Body.onload = function()
drawAvatar();
;
Head.onload = function()
drawAvatar();
;
function drawAvatar()
ctx.clearRect(0, 0, canvas.width, canvas.height); // Cleans Canvas
var dArr = [-1,-1, 0,-1, 1,-1, -1,0, 1,0, -1,1, 0,1, 1,1], // offset array
s = 4, // thickness scale
i = 0, // iterator
x = 0, // final position
y = 0;
// draw images at offsets from the array scaled by s
for(; i < dArr.length; i += 2)
ctx.drawImage(Head, x + dArr[i]*s, y + dArr[i+1]*s);
ctx.drawImage(Body, 11 + dArr[i]*s, 15 + dArr[i+1]*s);
// fill with color
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0,0,canvas.width, canvas.height);
ctx.globalCompositeOperation = "source-over";
ctx.drawImage(Body, 11, 16);
ctx.drawImage(Head, 0, 0);
</script>答案
你需要让你的头像绘制相对于一组坐标...
请看下面我对你代码的修改。我简化并删除了你的很多代码，以保持例子的简短，我建议你在提出问题时也这样做，例如你的酒店选择没有问题，所以删除它并硬编码任何值，只是为了专注于实际问题。长长的代码块只会让别人不愿意深入研究你的问题。
关键在于 function drawAvatar(x, y, shadow) 现在你的drawAvatar函数需要一些参数，我们不再在里面做clearRect。有一个新的 function draw() 这是一个清除画布将 "控制 "所有的图纸。
var canvas = document.getElementById("User");
var ctx = canvas.getContext("2d");
var Head = new Image();
Head.onload = draw;
var Body = new Image();
Body.onload = draw;
generateAvatar()
function generateAvatar()
tUsername = document.getElementById("username").value;
Head.src = "https://www.habbo.it/habbo-imaging/avatarimage?user=" + tUsername + "&head_direction=3&img_format=gif&gesture=0&headonly=1";
Body.src = "https://www.habbo.it/habbo-imaging/avatarimage?img_format=gif&user=" + tUsername + "&action=std&airection=2&head_direction=2&gesture=sml&size=s";
function draw()
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawAvatar(10, 10, 30);
drawAvatar(80, 15, 10);
drawAvatar(150, 20, 0);
function drawAvatar(x, y, shadow)
ctx.shadowColor = 'black';
ctx.shadowBlur = shadow;
ctx.drawImage(Body, x + 11, y + 16);
ctx.drawImage(Head, x, y);
<input oninput="generateAvatar()" id="username" type="text" value="Mario">
<br/>
<canvas id="User" width="250" height="100"></canvas>以上是关于我怎么能生成多个头像？的主要内容，如果未能解决你的问题，请参考以下文章
java怎么生成带用户微信头像的图片，并把这张图片发送给用户。