Question

我正在尝试展示一张有效的欧洲地图。然后我试图在使用画布对象的国家中着色。问题是，只有爱尔兰才会展示其着色，而不是英国。请帮忙！

代码：

    <!DOCTYPE html>
    <html>
    <head>
    <title> </title>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <style>
    body 
    { 
       background-color:#4965D6;
    }

    canvas
    {
       position:fixed;
       left:16%;
       border:1px solid #000000;
    }

    span
    {
       left:50%;
       top:90%;
       position:fixed;
       color:white;
       font-size:20px;
    }

    #user
    {
       position:fixed;
       left:25%;
       top:75%;
       font-size:25px;
    }

    #pc
    {
       position:fixed;
       left:65%;
       top:75%;
       font-size:25px;
    }

    #userDiceuk1
    {
       position:fixed;
       left:30%;
       top:85%;
    }

    #enemyDice
    {
       position:fixed;
       left:70%;
       top:85%;
    }

    #concatenate
    {
       position:fixed;
       left:50%;
       top:85%;
    }

    </style>
<script>

$(document).ready(function()
{
$(document).ready(function()
{
$("#great").show();
$("#concatenate").hide();
$("#myCanvas").hide();
$("#pc").hide();
$("#user").hide();
$("#userDiceuk1").hide();
$("#enemyDice").hide();
$("#userDiceuk1").hide();
$("#enemyDice").hide();
$("#battle").hide();

$("#great").click(function()
{
$("#great").hide();
$("#battle").show();

$("#battle").click(function()
{
drawEurope(); 
drawUK();
drawIreland();
$("#myCanvas").show();
$("#pc").show();
$("#user").show();
$("#userDiceuk1").show();
$("#enemyDice").show();
$("#userDiceuk1").show();
$("#enemyDice").show();
$("#concatenate").show();
});
});
});
});

</script>
<script>

document.addEventListener("DOMContentLoaded", init, false);

function init()
{
var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousedown", getPosition, false);
}

function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("myCanvas");

if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}

x -= canvas.offsetLeft;
y -= canvas.offsetTop;

alert("x: " + x + "  y: " + y);
}


</script>
</head>
<body>


<canvas id="myCanvas" width="900" height="500"></canvas>
<script type="text/javascript">
function drawEurope()
{
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var x = 0;
var y = 0;
var width = 900;
var height = 500;
var imageObj = new Image();

imageObj.onload = function() 
{
ctx.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'http://teacherlink.ed.usu.edu/tlresources/units/byrnes-literature/FARMER/Europe%20Map.GIF';
}
</script>
<script type="text/javascript">
function drawUK()
{
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var x = 0;
var y = 0;
var width = 900;
var height = 500;
var imageObj = new Image();

imageObj.onload = function() 
{
ctx.drawImage(imageObj, x, y, width, height);
ctx.beginPath();
ctx.moveTo(273,171);
ctx.lineTo(262,176);
ctx.lineTo(282,181);
ctx.lineTo(270,199);
ctx.lineTo(277,217);
ctx.lineTo(277,230);
ctx.lineTo(289,238);
ctx.lineTo(289,242);
ctx.lineTo(281,252);
ctx.lineTo(262,256);
ctx.lineTo(222,255);
ctx.lineTo(201,253);
ctx.lineTo(225,243);
ctx.lineTo(226,238);
ctx.lineTo(222,235);
ctx.lineTo(235,227);
ctx.lineTo(256,206);
ctx.lineTo(240,208);
ctx.lineTo(241,195);
ctx.lineTo(239,191);
ctx.lineTo(243,182);
ctx.lineTo(261,168);
ctx.lineTo(267,166);
ctx.lineTo(271,167);
ctx.lineTo(273,171);
ctx.fillStyle="red";
ctx.fill();
ctx.font="30px Times New Roman";
ctx.strokeText("UK",237,253);
};
imageObj.src = 'http://teacherlink.ed.usu.edu/tlresources/units/byrnes-literature/FARMER/Europe%20Map.GIF';
}
</script>
<script type="text/javascript">
function drawIreland()
{
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var x = 0;
var y = 0;
var width = 900;
var height = 500;

imageObj.onload = function() 
{
ctx.drawImage(imageObj, x, y, width, height);
ctx.beginPath();
ctx.moveTo(190,200);
ctx.lineTo(203,203);
ctx.lineTo(207,196);
ctx.lineTo(219,194);
ctx.lineTo(221,195);
ctx.lineTo(230,200);
ctx.lineTo(228,210);
ctx.lineTo(216,224);
ctx.lineTo(211,227);
ctx.lineTo(193,228);
ctx.lineTo(184,231);
ctx.lineTo(170,223);
ctx.lineTo(188,219);
ctx.lineTo(186,206);
ctx.lineTo(190,200);
ctx.fillStyle="green";
ctx.fill();
};
imageObj.src = 'http://teacherlink.ed.usu.edu/tlresources/units/byrnes-literature/FARMER/Europe%20Map.GIF';
}
</script>

<script>

function diceuk1()
{
var ukArmies = 1;
var enemyArmies = 1;

if (ukArmies === 1)
{
var userDiceuk1 = Math.floor((Math.random()*6)+1);
var enemyDice = Math.floor((Math.random()*6)+1);

if (userDiceuk1 > enemyDice)
{
$("#userDiceuk1").text(userDiceuk1);
$("#concatenate").text(" > ");
$("#enemyDice").text(enemyDice);
alert("You Win!");
ukArmies++;
enemyArmies--;
}

if (userDiceuk1 === enemyDice)
{
$("#userDiceuk1").text(userDiceuk1);
$("#concatenate").text(" = ");
$("#enemyDice").text(enemyDice);
alert("You and the enemy have tied. Both of you will gain no land!");
}

if (userDiceuk1 < enemyDice)
{
$("#userDiceuk1").text(userDiceuk1);
$("#concatenate").text(" < ");
$("#enemyDice").text(enemyDice);
alert("You have lost");
ukArmies--;
enemyArmies++;
}
}
}

</script>

<button type="button" id="battle" onclick="">Continue to Battle</button>
<button type="button" id="great" onclick="">UK</button>



<p id="user">Player 1 Dice</p>
<p id="pc">Computer Dice</p>

<span id="userDiceuk1"></span>
<span id="concatenate"></span>
<span id="enemyDice"></span>

</body>
</html>

Answer 1

这是一个范围问题。

对于爱尔兰，您没有声明imageObj，而是在全局窗口对象上，这意味着，在这种情况下，imageObj可从图像回调中获得。这似乎是正确的，但它不是。

在英国的另一边，imageObj在本地正确指定，但是当触发回调时，范围不再可用，使回调内的imageObj引用无效。

要解决这两种情况，请在图片onload回调中执行以下操作 - 将imageObj的引用替换为this：

var imageObj = ...  // remember "var"

imageObj.onload = function() {
    ctx.drawImage(this, x, y, width, height);
    ...           ^^^^

this在此表示为该回调加载的当前图像。

画布模型对象不会显示颜色

1 个答案: