<html>
<script type="text/javascript">
var name="name of troop/general"; var attack="attack"; var defense="defense"; var effect1=""; var effect2=""; var effect3=""; var effect4=""; var effect5=""; var effect6=""; var flavortext1=""; var flavortext2=""; var flavortext3=""; var flavortext4=""; var flavortext5=""; var flavortext6=""; var username="your name here"; var a="troop"; var b="common1"; var c="human"; var d="any"; var e="agility";
function setname()
{
name = document.forms["form"]["name"].value;
alert("unit name = " + name);
}
function setattack()
{
attack = document.forms["form"]["attack"].value;
alert("attack = " + attack);
}
function setdefense()
{
defense = document.forms["form"]["defense"].value;
alert("defense = " + defense);
}
function seteffect()
{
//using document.forms to get the value of effects
alert("effect = " + effect1 + effect2 + effect3 + effect4 + effect5 + effect6);
}
function setflavortext()
{
//using document.forms to get the value of flavortext
alert("flavortext =" + flavortext1 + flavortext2 + flavortext3 + flavortext4 + flavortext5 + flavortext6);
}
function setusername()
{
username = document.forms["form"]["username"].value;
alert("name = " + username);
}
function setimage()
{
base_image = new Image();
base_image.src = document.forms["form"]["image"].value;
base_image.onload = function
{
base.drawImage(base_image, 300, 30, 90, 90);
}
}
</script>
<canvas id="canvas" width="400" height="700" style="solid"></canvas>
<script type="text/javascript">
var mathmath = defense/4;
var attackvalue = attack + mathmath;
function writeall()
{
var can=document.getElementById("canvas");
var base=can.getContext("2d");
base.fillStyle="grey"; //background
base.fillRect(0,0,400,1200);
base.fillStyle="#FFBF00"; //orangeish
base.font="15px Arial";
base.fillText(name, 0, 20);
base.fillStyle="#EFFBF8" //white
base.fillText("Quality:", 0, 40); //this is the only base.fillText that works...
base.fillText(attack, 50, 80);
base.fillText(defense, 60, 100);
base.fillText(attackvalue, 120, 60);
//base.fillText's like the ones above, of varying colors
if(a == "general")
{
base.fillText(a, 350, 20);
}
//ifs like the one above
base.fillStyle="#FF4000" //dark orange
base.fillText(effect1, 0, 180);
//5 more effect vars being fillTexted; do not work...
var y = 0;
//ifs to set y
base.font="italic 15px Arial";
base.fillStyle="#EFFBF8" //white
//ifs to set y
base.font="15px Arial";
var x = 0;
//ifs to set x
base.fillText(username, 0, y+x);
if(c == "human")
{
base_image = new Image();
base_image.src = 'http://images2.wikia.nocookie.net/__cb20120812195219/dotd/images/c/c5/Race_human.png';
base_image.onload = function()
{
base.drawImage(base_image, 0, 105);
}
}
//ifs like the one above, a bunch of them; none work
</script>
</html>
老实说,我不知道问题出在哪里,但值得注意的是,在我尝试添加 setimage() 函数之前,它都按预期工作(我稍后会介绍)......它旨在创建一个大的灰色矩形和在上面写了一堆东西,我弄乱了一点,所以看起来很奇怪;但现在它只剩下一个灰色的长方形,上面写着质量这个词;当我按下 setimage() 函数的按钮时没有任何反应,甚至没有我输入的警报...我已经浏览了几次,然后用记事本 ++ 看了几次,我很困惑...谢谢提前给你时间。