javascript - 为什么我的输入表单画布图消失了？ - Thinbug

为什么我的输入表单画布图消失了？

时间：2014-07-16 22:50:50

标签： javascript html canvas input html5-canvas

在我建立的苹果专柜中，它应该如下工作：

输入数字
点击按钮
根据步骤1中输入的输入信息打印画布。

然而，似乎当我点击提交时，屏幕变为空白，或者预期的输出在屏幕上闪烁然后消失为空白屏幕。

谁能告诉我出了什么问题？

以下是代码的相关内容：

HTML：

<body>
<form>
    How many apples? <input id="apples"></input><br/>
        <button onclick="draw()">Count!</button>
</form>
    <canvas id="tutorial" width="300" height="150"></canvas>
</body>
<script type="text/javascript" src = "script.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

JS：

var canvas = document.getElementById('tutorial');

var ctx = canvas.getContext('2d');


var draw=function(){

      //footer
      ctx.font="16px futura"
      ctx.fillText("Apples",10,140);


      //create and scale image of apple
      var appleImg = new Image();
      appleImg.src ="http://cdn.oxwordsblog.wpfuel.co.uk/wpcms/wp-content/uploads/apple-e1382039006457.jpg";
      ctx.save();
      ctx.scale(0.06,0.06);


      //use input value to print apples
var appleIn = parseInt(document.getElementById("apples").value,10);
              for(var i=0;i<appleIn;i++)
      {
      ctx.drawImage(appleImg,0,i*525);
      }

}

这里也是我的代码的链接： http://www.codecademy.com/curiousgeorge/codebits/3FPdqV

1 个答案:

答案 0 :(得分：1)

Button Tag兼作可点击元素和提交按钮。您需要提供您想要的按钮类型：

<button type="button" onclick="draw();">Count!</button>

所以添加 type =＆＃34; button＆＃34; 。