Question

下面的代码在启动时会生成一个与画布大小相同的矩形。问题是，当用户单击按钮时，会生成一个新画布，但不会出现矩形。请帮忙。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){ <!-- function to change the <canvas> attributes of "width" and "height" to the same size as the rectangle -->
   $("#btn").click(function(){
   $("#myCanvas").attr("height", $("#height").val());
   $("#myCanvas").attr("width", $("#width").val());
  });
});
</script>

</head>

<body>
  &nbsp;Rectangle Width:
  <input type="number" id="width" value="400">
  &nbsp;Rectangle Height:
  <input type="number" id="height" value="400">
  &nbsp;    
  <br>

  <canvas id="myCanvas" width=400 height=400 style="border:0px solid #d3d3d3;"> 
  Your browser does not support the HTML5 canvas tag.</canvas>

<script>
rect();
function rect(){
  width = document.getElementById("width").value;
  height = document.getElementById("height").value;
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.strokeStyle = "#FF0000";
  ctx.strokeRect(0,0, width, height);
}
</script>
<button id="btn" onclick = "rect()">Submit to draw a rectangle the same size as the canvas</button>     
</body>
</html>

Answer 1

删除您的$(document).ready(function(){功能，然后更改您的功能rect()，如下所示： -

 function rect(){ 
   width = document.getElementById("width").value;
   height = document.getElementById("height").value;
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.canvas.height = height;//add this 
   ctx.canvas.width = width;// and this
   ctx.strokeStyle = "#FF0000";
   ctx.strokeRect(0,0, width, height);

}

Demo

Answer 2

当你调用rect函数时，你得到宽度的id，我不确定实际上会解决什么。

width = document.getElementById("width").value;

但是在按钮单击中，您将创建一个与id分开的属性，名为＆＃34; width＆＃34;并且这些更改确实会改变画布的尺寸。如果你不想通过jquery获得高度和宽度，你可以使用

document.getElementById("myCanvas").height
document.getElementById("myCanvas").width

尝试使用代码中的那些来分别更改高度和宽度变量。

Answer 3

onclick属性中的javascript代码在使用jQuery（$("#btn").click(function(){...});）定义的侦听器之前执行。因此，当您单击提交按钮时，在更改canvas元素的维度之前调用rect函数，因此将清空画布内容。在画布大小更改后，您需要调用rect：Plunker。

生成画布宽度和高度属性与用户输入大小的矩形大小相同

3 个答案: