测试寻人启事
<canvas id="myCanvas" width="453" height="546">当前浏览器不支持Html5的canvas</canvas><table>
<tr><td>请将要输入的内容填入文本框，图片会自动显示。</td></tr>
<tr><td>服务器名 称：<input id="servername" name="servername" onchange="myldxy()" type="text" /></td></tr>
<tr><td>游戏角色昵称：<input id="nicheng" name="nicheng" onchange="myldxy()" type="text" /></td></tr>
<tr><td>游戏角色门派：<input id="menpai" name="menpai" onchange="myldxy()" type="text"/></td></tr>
<tr><td>游戏角色ＩＤ：<input id="id" name="id" onchange="myldxy()" type="text" /></td></tr>
<tr><td>对ta想说的话：<textarea id="tasay" name="tasay" onchange="myldxy()" cols="30" rows="3">输入你要对神天兵朋友说的话吧~(30字以内)！</textarea></td></tr>
</table>
<script type="text/javascript">
var servername;
var nicheng;
var menpai;
var id;
var tasay;
servername = servername;
nicheng = nicheng;
menpai = menpai;
id = id;
tasay = tasay;
mycanvas();
function myldxy() {
servername = document.getElementById("servername").value;
nicheng = document.getElementById("nicheng").value;
menpai = document.getElementById("menpai").value;
id = document.getElementById("id").value;
tasay = document.getElementById("tasay").value;
mycanvas()
};
function mycanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "https://ok.166.net/forum/xyq/forum/202403/13/180534n49zqzfmntaqaic9.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
ctx.globalCompositeOperation = "source-over";
ctx.font = "16px微软雅黑";
ctx.fillStyle = "#000";
ctx.fillText(servername, 118,300);
ctx.font = "16px 微软雅黑";
ctx.fillStyle = "#000";
ctx.fillText(nicheng, 237,300);
ctx.font = "16px 微软雅黑";
ctx.fillStyle = "#000";
ctx.fillText(menpai, 118,333);
ctx.font = "16px 微软雅黑";
ctx.fillStyle = "#000";
ctx.fillText(id, 237,333);
ctx.font = "20px 微软雅黑";
ctx.fillStyle = "#510b0e";
for (i=0;i<5;i++) {
tasay1 = tasay.substr(i*10,10);
ctx.fillText(tasay1, 106, 390+i*20);};
};
};
function myldxy2() {
document.getElementById("ld-bt").innerHTML = "PC端用户右键下载贺卡，手机用户直接截屏。";
myldxy()
};
</script>
这是什么#24
页:
[1]
