Question

<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（）函数的按钮时，没有任何反应，甚至没有我放入它的警报...我已经浏览了几次，然后用记事本++几次，我很困惑...... 感谢您提前的时间。

canvas.drawImage（）和canvas.fillText（）表现得很时髦

0 个答案: