canvas html不工作

我一直在处理这段代码，我似乎创建了正确的函数，但是当我运行它时，它实际上并没有绘制任何东西？我错过了什么？canvas html不工作

我尝试了不同的线条，弧形，三角形和矩形的绘图形式，看看它们中的一个是不是工作，但他们都没有工作。

谢谢！

<html> 
 
    <head> 
 
     <title>Hwk8 Drawable</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script type="text/javascript"> 
 
      function draw() 
 
      { 
 
       shapeSelected = document.index.shapeChosen.value; 
 
       //creating canvas object 
 
       canvas = document.getElementByID("myCanvas"); 
 
       ctx = canvas.getContext("2d"); 
 
       ctx.fillStyle = "rgb(0,255,0)"; 
 
       
 
       if (shapeSelected == "line") 
 
       { 
 
        ctx.moveTo(0,0); 
 
        ctx.lineTo(200,100); 
 
        ctx.stroke(); 
 
       } 
 
       else if (shapeSelected.equals("arc")) 
 
       { 
 
        ctx.beginPath(); 
 
        ctx.arc(95,50,40,0,2); 
 
        ctx.stroke(); 
 
       } 
 
       else if (shapeSelected === "triangle") 
 
       { 
 
        ctx.beginPath(); 
 
        ctx.moveTo(75,0); 
 
        ctx.lineTo(150,100); 
 
        ctx.lineTo(0,100); 
 
        ctx.lineTo(75,0); 
 
        ctx.closePath(); 
 
        ctx.stroke(); 
 
       } 
 
       else if (shapeSelected.equals("rectangle")) 
 
       { 
 
        ctx.strokeRect(50,50,50,50); 
 
        ctx.fillRect(25,25,100,100); 
 
       } 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <form action ="index.jsp"> 
 
      <h2>Choose what you want to draw</h2> 
 
      <select name="shapeChosen" required onChange="draw()"> 
 
       <option value="" selected disabled>Select a Shape</option> 
 
       <option value="line">Line</option> 
 
       <option value="arc">Arc</option> 
 
       <option value="triangle">Triangle</option> 
 
       <option value="square">Square</option> 
 
      </select> 
 
     </form> 
 
     <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"> 
 
     Your browser does not support the HTML5 canvas tag.</canvas> 
 
     
 
    </body> 
 
</html>

来源

2015-10-07 baldemora

Wha你的控制台是否显示？...使用调试器并检查draw（）函数是否被调用？ – AkshayJ

使用document.getElementsByName()通过name得到一个元素，document.getElementByID应document.getElementById。并使用==（或===），而不是.equals()：

function draw() 
{ 
    shapeSelected = document.getElementsByName("shapeChosen")[0].value; 
    //creating canvas object 
    canvas = document.getElementById("myCanvas"); 
    ... 
}

而且你的最后一条语句必须(shapeSelected =="square")而不是(shapeSelected == "rectangle")作为<option>它的定义为：<option value="square">Square</option>。

Fiddle Example

来源

2015-10-07 04:33:40

发生在你的代码

1）您需要更改语法选择一个选项值

2）你已经写的getElementById（）

的错误的语法请检查已纠正的例子Corrected Your Code Jsfiddle

来源

2015-10-07 05:12:04 Umashankar

谢谢，我修好了:) – baldemora

欢迎@baldemora – Umashankar

canvas html不工作

回答

相关问题