Question

在家庭作业上使用画布，我认为我得到了所有内容，但是当我在Chrome中打开它时，我不断收到错误：

[Uncaught TypeError：无法读取属性＆＃39; draw＆＃39;未定义的]

到目前为止，这是我的代码。也许你们可以指出我正确的方向。

<!DOCTYPE HTML>
<html>
<head>
    <title>Fun Drawings!!</title>
    <meta http-equiv="Content-Type" content"text/html; charset=UTF-8" />
    <link href="style/style.css" title="Default" rel="stylesheet" 
        type="text/css">
</head>

<body>
    <h1> Picture Time!! </h1>

    <form name="draw" id="draw"  >
        Pick a picture: &nbsp&nbsp
        <input type = "radio" name="pic" value="boat" /> Boat
        <input type = "radio" name="pic" value="car" /> Car
        <input type = "radio" name="pic" value="house" /> House<br> <br />

        What size: &nbsp&nbsp
        <input type = "radio" name="size" value="small" /> Small
        <input type = "radio" name="size" value="medium" /> Medium
        <input type = "radio" name="size" value="large" /> Large<br> <br />

        Select a color:
        <select name="color">
            <option value="select">Select color</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="purple">Purple</option>
            <option value="red">Red</option>
            <option value="black">Black</option>
            <option value="pink">Pink</option>
        </select><br><br />

        Use check boxes to select decorations:&nbsp&nbsp
        <input type = "checkbox" name="birds" value="birds" /> Birds
        <input type = "checkbox" name="clouds" value="clouds" /> Clouds
        <input type = "checkbox" name="sun" value="sun" /> Sun<br> <br />


        <input type = "submit" value="draw" 
            onClick="updateDrawing()"/> &nbsp&nbsp
        <input type = "submit" value="clear"
            onClick="clearDrawings()" /> &nbsp&nbsp
        <input type = "reset" value="Clear Options" /><br> <br />

    </form> 
    <script src="script/drawing.js"> </script>

    <canvas id="drawings" height="600" width="700" >
    </canvas>

</body>

window.onload = function()
{
var form = document.getElementById("draw");
form.onsubmit = eventHandler;
}
function drawBirds(context) 
{
var canvas = document.getElementById("drawings"); // birds
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "rgb(138,138,138)";
    context.moveTo(200,100); // 1st bird
    context.lineTo(250,150); // 1st bird
    context.lineTo(300,100); // 1st bird
    context.lineTo(250,125); // 1st bird
    context.lineTo(200,100); // 1st bird
    context.moveTo(100,50); // 2nd bird
    context.lineTo(150,100); // 2nd bird
    context.lineTo(200,50); // 2nd bird
    context.lineTo(150,75); // 2nd bird
    context.lineTo(100,50); // 2nd bird
    context.moveTo(300,150); // 3rd bird
    context.lineTo(325,175); // 3rd bird
    context.lineTo(350,150); // 3rd bird
    context.lineTo(325,167); // 3rd bird
    context.lineTo(300,150); // 3rd bird
    context.moveTo(400,50); // 4rd bird
    context.lineTo(425,75); // 4rd bird
    context.lineTo(450,50); // 4rd bird
    context.lineTo(425,67); // 4rd bird
    context.lineTo(400,50); // 4rd bird
context.closePath();
context.fill();
}

function drawClouds(context) 
{
var canvas = document.getElementById("drawings"); // clouds
var context = canvas.getContext("2d");

context.beginPath();
context.fillStyle = "white";
    context.arc(550, 85, 25, 0, Math.PI*2, false);
    context.arc(560, 90, 25, 0, Math.PI*2, false);
    context.arc(575, 75, 25, 0, Math.PI*2, false);
    context.arc(580, 95, 25, 0, Math.PI*2, false);
    context.arc(590, 85, 25, 0, Math.PI*2, false);
    context.arc(590, 100, 25, 0, Math.PI*2, false);
    context.arc(600, 95, 25, 0, Math.PI*2, false);
    context.arc(610, 85, 25, 0, Math.PI*2, false);
    context.arc(620, 90, 25, 0, Math.PI*2, false);
context.closePath();
context.fill();

}

function drawSun(context) 
{
var canvas = document.getElementById("drawings"); // sun
var context = canvas.getContext("2d");
sunsetGradient = context.createLinearGradient(0, 0, 0, 150);
sunsetGradient.addColorStop(0, "yellow");
sunsetGradient.addColorStop(0.6, "orange");
sunsetGradient.addColorStop(1, "red");

context.beginPath();
context.fillStyle = sunsetGradient;
    context.arc(75, 75, 65, 0, Math.PI*2, false);
context.closePath();
context.fill();
}

function drawBoat(context, color, size) 
{
var canvas = document.getElementById("drawings");
var context = canvas.getContext("2d");
var color = document.getElementsByClassName("color");
var size = document.getElementsByClassName("size");
context.beginPath();
context.fillStyle = "rgb(173,225,245)"; // railing color
    context.fillRect(150, 225, 280, 25); // railing
context.closePath();
context.fill();

context.beginPath();
context.fillStyle = color; // boat color
    context.fillRect(150, 250, 400, 100); // boat body
context.closePath();
context.fill();

context.beginPath();
context.fillStyle = "gray"; // propeller box
    context.fillRect(550, 320, 30, 30); // propeller box
    context.fillRect(560, 350, 15, 20); // propeller shaft
context.closePath();
context.fill();

context.beginPath();
    context.moveTo(150, 250); // front end
    context.lineTo(50, 250); // front end
    context.lineTo(150, 350); // front end
context.closePath();
context.fillStyle = color;
context.fill();

context.beginPath(); 
    context.moveTo(150, 225); // railing
    context.lineTo(150, 250);
    context.moveTo(170, 225); // railing
    context.lineTo(170, 250);
    context.moveTo(190, 225); // railing
    context.lineTo(190, 250);
    context.moveTo(210, 225); // railing
    context.lineTo(210, 250);
    context.moveTo(230, 225); // railing
    context.lineTo(230, 250);
    context.moveTo(250, 225); // railing
    context.lineTo(250, 250);
    context.moveTo(270, 225); // railing
    context.lineTo(270, 250);
    context.moveTo(290, 225); // railing
    context.lineTo(290, 250);
    context.moveTo(310, 225); // railing
    context.lineTo(310, 250);
    context.moveTo(330, 225); // railing
    context.lineTo(330, 250);
    context.moveTo(350, 225); // railing
    context.lineTo(350, 250);
    context.moveTo(370, 225); // railing
    context.lineTo(370, 250);
    context.moveTo(390, 225); // railing
    context.lineTo(390, 250);
    context.moveTo(410, 225); // railing
    context.lineTo(410, 250);
    context.moveTo(430, 225); // railing
    context.lineTo(430, 250);
    context.moveTo(150, 225); // railing top
    context.lineTo(430, 225);
    context.moveTo(150, 225); // window
    context.lineTo(165, 150); // window
    context.lineTo(165, 225); // window
    context.moveTo(165, 225); // wheel
    context.lineTo(195, 195); // wheel
    context.moveTo(190, 175); // wheel
    context.lineTo(205, 210); // wheel
context.closePath();
context.stroke();

context.beginPath();
    context.moveTo(560, 350); // fin down
    context.lineTo(540, 390); // fin down
    context.lineTo(560, 370); // fin down
    context.moveTo(575, 350); // fin up
    context.lineTo(595, 330); // fin up
    context.lineTo(575, 370); // fin up
context.closePath();
context.fillStyle = "white";
context.fill();
}

function drawCar(context, color, size) 
{
var canvas = document.getElementById("drawings");
var context = canvas.getContext("2d");
var color = document.getElementsByClassName("color");
var size = document.getElementsByClassName("size");
context.beginPath();
context.fillStyle = color; // top of car
    context.arc(250, 250, 100, 0, Math.PI, true); // x, y, radius, startAngle, endAngle, anticlockwise
    context.fillRect(75, 325, 25, 25); // bumper
    context.fillRect(400, 325, 25, 25); // bumper
    context.fillRect(400, 250, 5, 15); // headlight
    context.fillRect(100, 250, 300, 100); // car body
context.closePath();
context.fill();

context.beginPath();
context.fillStyle="white"; // tires
    context.arc(175, 365, 40, 0, Math.PI*2, false); // left tire
    context.arc(325, 365, 40, 0, Math.PI*2, false); // right tire
    context.fillRect(200, 175, 45, 50); // windows
    context.fillRect(260, 175, 45, 50); // windows
context.closePath();
context.fill();
}

function drawHouse(context, color, size) 
{
var canvas = document.getElementById("drawings");
var context = canvas.getContext("2d");
var color = document.getElementsByClassName("color");
var size = document.getElementsByClassName("size");
context.beginPath();
context.fillStyle = color; // house color
    context.fillRect(200, 225, 200, 250); // house part
context.closePath();
context.fill();

context.beginPath();
context.fillStyle = "white";
    context.fillRect(225, 325, 70, 150); // door part
    context.fillRect(305, 250, 75, 75); // window
context.closePath();
context.fill();

context.beginPath();
context.fillStyle = color; // roof color
    context.moveTo(200, 225); // roof
    context.lineTo(300, 125); // roof
    context.lineTo(400, 225); // roof
context.closePath();
context.fill();

context.beginPath();
context.strokeStyle = "black";
    context.moveTo(343, 250); // window
    context.lineTo(343, 325); // window
    context.moveTo(305, 288); // window
    context.lineTo(380, 288); // window
context.closePath();
context.stroke();

}

function color()
{
var color = document.getElementsByClassName("color");
}

function size()
{
var size;
if(size.value == "small")
{
    size = 50;
}
else if(size.value =="medium")
{
    size = 100;
}
else if(size.value == "large")
{
    size = 150;
}

}

function eventHandler(form)
{
form.draw.onclick = function()
{
    updateDrawings(context);
}

form.clear.onclick = function()
{
    clearDrawing(context);
}
}

function clearDrawing()
{
clearDrawing(0,0, canvas.width, canvas.length);
 }

 function updateDrawings()
 {
if(pic.value == "house")
{
    drawHouse(context, color.value, size);
}
else if(pic.value == "boat")
{
    drawBoat(context, color.value, size);
}
else if(pic.value == "car")
{
    drawCar(context, color.value, size);
}   
}

function validateRadioChecked()
{
var isComplete = true;
if(!form.html.checked && !form.css.checked && !form.javascript.checked)
{
    isComplete == false;
}   

var isPicSelected;
for(var i = 0; i < form.pic.length; i++)
{
    if(form.pic[i].checked)
    {
        isPicSelected = true;
        break; // exits the loop
    }
}
if(isPicSelected == false)
{
    isComplete = false;
}
if(isComplete == false)
{
    alert("You didn't complete the form!");
}

var isSizeSelected;
for(var i = 0; i < form.size.length; i++)
{
    if(form.size[i].checked)
    {
        isSizeSelected = true;
        break; // exits the loop
    }
}
if(isSizeSelected == false)
{
    isComplete = false;
}
if(isComplete == false)
{
    alert("You didn't complete the form!");
}   
}

function isOptionSelected()
{
var isComplete = true;
if(!form.html.checked && !form.css.checked && !form.javascript.checked)
{
    isComplete == false;
}   

var isColorSelected;
for(var i = 0; i < form.colors.length; i++)
{
    if(form.colors[i].checked)
    {
        isColorSelected = true;
        break; // exits the loop
    }
}
if(isColorSelected == false)
{
    isComplete = false;
}
if(isComplete == false)
{
    alert("You didn't complete the form!");
}
}

function isCheckboxSelected()
{
var isBoxSelected = false;
if(document.form[0].birds.checked)
{
    drawBirds(context);
}
if(document.form[0].clouds.checked)
{
    drawClouds(context);
}
if(document.form[0].sun.checked)
{
    drawSun(context);
}

return false;
}

Answer 1

您收到此错误是因为您在没有任何参数的情况下调用eventHandler（），而期望form。然后，您继续访问form.draw...，生成您正在看到的消息。

更改后，您还需要将按钮类型从submit更改为button，否则每次点击页面时都会重新加载。

用javascript在画布上绘图

1 个答案: