0

我的任务是画一个房子，然后使用一个循环（在底部）用房子填充画布，而不是手动放置每个房子。

好吧，我正在努力研究如何让其他房子的门都变绿。我一直在尝试破解代码一段时间，但我无法弄清楚。

我知道我所有的房子都应该有功能，但那是我正在做的工作的后续任务！这是我的代码：

//Check to see if the browser supports
//the addEventListener function
if(window.addEventListener)
{
    window.addEventListener
    (
        'load', //this is the load event
        onLoad, //this is the evemnt handler we going to write
        false //useCapture boolen value
    );
}

//the window load event handler
function onLoad()
{
    var canvas;     
    var context;


    //this function will intialise our variables
    function initialise()
    {


        // Fune the canvas element using its id attribute.
        canvas = document.getElementById('canvas');
        //if it couldn't be found
        if (!canvas)
        {
            //make a message bok appear with an error message
            alert('Error: i cannot find this "canvas" of which you speak. Please re-evaluate your life choices.');
            return;
        }
        //check if there is any getContext function
        if(!canvas.getContext)
        {
            alert('Error no cavnas.getContext could be found');
            return;
        }
        //get the 2D canvas context.
        context = canvas.getContext('2d');
        if(!context)
        {
            alert('Error failed to getCOntext');
            return;
        }

        canvas.addEventListener("mousedown", getPosition, false);
    }

    // this is a little help tool for me as i'm awful at working out co-ordinates
    function getPosition(e)
    {
        var x = e.x;
        var y = e.y;
        x -=canvas.offsetLeft;
        y -=canvas.offsetTop;
        alert("x:" +x+ "y:"+y);
    }

    //this function will draw on the canvas for me!
    function draw()
    {
        context.fillStyle = 'grey';
        context.fillRect(0, 0, canvas.width, canvas.height);
    }


    // pX and pY are the parameters are going to be used so that the inside of the house body becomes the drawing canvas.
    function drawHouse(pX ,pY)
    {
        //body
        context.beginPath();
        context.fillStyle = '#ffffff';
        context.strokeStyle = "black";
        context.lineWidth = "5";
        context.rect(pX,pY, 160,110);
        context.closePath();
        context.fill();
        context.stroke();

        //roof
        context.beginPath();
        context.fillStyle = "red";
        context.moveTo(pX,pY-1);;
        context.lineTo(pX+80, pY-95);
        context.lineTo(pX+160, pY-1);
        context.closePath();
        context.fill();
        context.stroke();

        //door 
        context.beginPath();
        context.fillStyle = "green";
        context.fillSStyle = "red";
        context.strokeStyle = "black";
        context.rect(pX+55,pY+30, 50, 80);
        context.fill();
        context.stroke();

        //handle
        var radius = 5;
        context.beginPath();
        context.arc(pX+93, pY+75, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'purple';
        context.fill();
        context.lineWidth = 3;
        context.strokeStyle = 'black';
        context.stroke();

        //window Left
        context.beginPath();
        context.fillStyle = 'blue';
        context.strokeStyle = "black";
        context.rect(pX+12,pY+30, 30, 60);
        context.fill();
        context.stroke();

        //window Filler left vertically
        context.beginPath();
        context.moveTo(pX+26.5,pY+30);
        context.lineTo(pX+26.5, pY+90);
        context.fill();
        context.stroke();

        //Window filler left horizontally
        context.beginPath();
        context.moveTo(pX+41, pY+60);
        context.lineTo(pX+11,pY+60);
        context.fill();
        context.stroke();

        //Window Right
        context.beginPath();
        context.fillStyle = 'blue';
        context.strokeStyle = "black";
        context.rect(pX+117,pY+30, 30, 60);
        context.fill();
        context.stroke();

        //window filler right vertically
        context.beginPath();
        context.moveTo(pX+131.5,pY+30);
        context.lineTo(pX+131.5, pY+90);
        context.fill();
        context.stroke();

        //window Filler right horizontally
        context.beginPath();
        context.moveTo(pX+147, pY+60);
        context.lineTo(pX+117,pY+60);
        context.fill();
        context.stroke();
    }

    initialise();
    draw();
    for(var i=0; i < 5; i++)
    {
        var pX=0+160*i;

        for(var b=0; b < 5; b++)
        {
            var pY=100+210*b;
            drawHouse(pX,pY);
        }
    }
}
4

1 回答 1

0

将参数添加到drawHouse：

function drawHouse(pX, pY, drawGreen) {
   // ...
   if (drawGreen)
       context.fillStyle = "green";
   else
       context.fillSStyle = "red";     
   // ...
}

然后，相应地传递它。例如：

// before your loop
var paintGreen = false;

// In the inner for
var pY=100+210*b;
drawHouse(pX,pY,paintGreen);
paintGreen = !paintGreen; // alternate
于 2013-10-31T15:43:23.090 回答