用javascript在画布上绘制_Javascript_Canvas

用javascript在画布上绘制

javascript canvas

用javascript在画布上绘制,javascript,canvas,Javascript,Canvas,在家庭作业中使用canvas，我想我得到了一切，但当我在Chrome中打开它时，我不断得到错误： [未捕获的TypeError:无法读取未定义的属性'draw'] 这是到目前为止我的代码。也许你们能给我指出正确的方向 <!DOCTYPE HTML> <html> <head> <title>Fun Drawings!!</title> <meta http-equiv="Content-Type" content"

在家庭作业中使用canvas，我想我得到了一切，但当我在Chrome中打开它时，我不断得到错误：

[未捕获的TypeError:无法读取未定义的属性'draw']

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

<!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；
}
函数（上下文）
{
var canvas=document.getElementById（“绘图”）；//鸟类
var context=canvas.getContext（“2d”）；
context.beginPath（）；
context.fillStyle=“rgb（138138）”；
context.moveTo（200100）；//第一只鸟
context.lineTo（250150）；//第一只鸟
context.lineTo（300100）；//第一只鸟
context.lineTo（250125）；//第一只鸟
context.lineTo（200100）；//第一只鸟
context.moveTo（100,50）；//第二只鸟
context.lineTo（150100）；//第二只鸟
context.lineTo（200,50）；//第二只鸟
context.lineTo（150,75）；//第二只鸟
context.lineTo（100,50）；//第二只鸟
context.moveTo（300150）；//第三只鸟
context.lineTo（325175）；//第三只鸟
context.lineTo（350150）；//第三只鸟
context.lineTo（325167）；//第三只鸟
context.lineTo（300150）；//第三只鸟
context.moveTo（400,50）；//第四只鸟
context.lineTo（425,75）；//第四只鸟
context.lineTo（450,50）；//第四只鸟
context.lineTo（425,67）；//第四只鸟
context.lineTo（400,50）；//第四只鸟
closePath（）；
context.fill（）；
}
函数（上下文）
{
var canvas=document.getElementById（“绘图”）；//云
var context=canvas.getContext（“2d”）；
context.beginPath（）；
context.fillStyle=“白色”；
arc（550,85,25,0，Math.PI*2，false）；
arc（560,90,25,0，Math.PI*2，false）；
arc（575,75,25,0，Math.PI*2，false）；
弧（580,95,25,0，数学PI*2，假）；
弧（590,85,25,0，数学PI*2，假）；
弧（5901025,0，数学PI*2，假）；
arc（600,95,25,0，Math.PI*2，false）；
arc（610,85,25,0，Math.PI*2，false）；
弧（620,90,25,0，数学PI*2，假）；
closePath（）；
context.fill（）；
}
函数drawSun（上下文）
{
var canvas=document.getElementById（“绘图”）；//sun
var context=canvas.getContext（“2d”）；
sunsetGradient=context.createLinearGradient（0,0,0,150）；
sunsetGradient.addColorStop（0，“黄色”）；
sunsetGradient.addColorStop（0.6，“橙色”）；
sunsetGradient.addColorStop（1，“红色”）；
context.beginPath（）；
context.fillStyle=sunsetGradient；
弧（75,75,65,0，Math.PI*2，false）；
closePath（）；
context.fill（）；
}
功能拖船（上下文、颜色、大小）
{
var canvas=document.getElementById（“图纸”）；
var context=canvas.getContext（“2d”）；
var color=document.getElementsByClassName（“color”）；
var size=document.getElementsByClassName（“size”）；
context.beginPath（）；
context.fillStyle=“rgb（173225245）”；//栏杆颜色
context.fillRect（15022528025）；//栏杆
closePath（）；
context.fill（）；
context.beginPath（）；
context.fillStyle=color；//船的颜色
context.fillRect（150250400100）；//船体
closePath（）；
context.fill（）；
context.beginPath（）；
context.fillStyle=“gray”；//螺旋桨箱
context.fillRect（55032030）；//螺旋桨箱
context.fillRect（560350,15,20）；//传动轴
closePath（）；
context.fill（）；
context.beginPath（）；
context.moveTo（150250）；//前端
context.lineTo（50250）；//前端
context.lineTo（150350）；//前端
closePath（）；
context.fillStyle=颜色；
context.fill（）；
context.beginPath（）；
context.moveTo（150225）；//栏杆
lineTo（150250）；
context.moveTo（170225）；//栏杆
lineTo（170250）；
context.moveTo（190225）；//栏杆
lineTo（190250）；
context.moveTo（210225）；//栏杆
lineTo（210250）；
context.moveTo（230225）；//栏杆
lineTo（230250）；
context.moveTo（250225）；//栏杆
lineTo（250250）；
context.moveTo（270225）；//栏杆
lineTo（270250）；
context.moveTo（290225）；//栏杆
lineTo（290250）；
context.moveTo（310225）；//栏杆
lineTo（310250）；
context.moveTo（330，225）；//栏杆
lineTo（330250）；
context.moveTo（350225）；//栏杆
lineTo（350250）；
context.moveTo（370225）；//栏杆
lineTo（370250）；
context.moveTo（390225）；//栏杆
lineTo（390250）；
context.moveTo（410225）；//栏杆
lineTo（410250）；
context.moveTo（430225）；//栏杆
lineTo（430250）；
context.moveTo（150225）；//栏杆顶部
lineTo（430225）；
context.moveTo（150225）；//窗口
context.lineTo（165，150）；//窗口
context.lineTo（165，225）；//窗口
context.moveTo（165225）；//wheel
context.lineTo（195195195）；//wheel
context.moveTo（190175）；//wheel
context.lineTo（205210）；//wheel
closePath（）；
stroke（）；
context.beginPath（）；
context.moveTo（560350）；//减鳍
context.lineTo（540390）；//减鳍
context.lineTo（560370）；//减鳍
context.moveTo（575350）；//fin up
context.lineTo（595330）；//fin up
context.lineTo（575370）；//fin up
closePath（）；
孔蒂
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;
}