试图让javascript在单击按钮时为画布元素设置动画。但是画布会出现一秒钟然后消失。答案

【问题标题】：Trying to get javascript to animate a canvas element on the click of a button. But the canvas shows itself for a second and then disappears.试图让javascript在单击按钮时为画布元素设置动画。但是画布会出现一秒钟然后消失。
【发布时间】：2018-12-04 00:36:57
【问题描述】：

我使用的代码是：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I don't know</title>
</head>
<body>
<p>What do you want? Max Limit. 100 X 100 . 0 for white. 1 for black. enter for newline</p>
 <form id="main">
<input type="text" name="string"><br>
<button onclick="drawBoard()">Click Me</button>
</form> 

<br>
<canvas id="canvas" width="420px" height="420px" style="background: #fff; margin:20px"></canvas>
 <script>
    function drawBoard(){
var bw = 400;
// Box height
var bh = 400;
// Padding
var p = 0;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
for (var x = 0; x <= bw; x += 40) {
context.moveTo(0.5 + x + p, p);
context.lineTo(0.5 + x + p, bh + p);
 }


for (var x = 0; x <= bh; x += 40) {
context.moveTo(p, 0.5 + x + p);
context.lineTo(bw + p, 0.5 + x + p);
}

context.strokeStyle = "black";
context.stroke();
}

 </script>
</body>
</html>

当我单击按钮时，网格会显示一秒钟然后消失。是什么导致了这个问题？当我打开控制台视图时，我看到一条错误消息“无法在‘DOMWindow’上执行‘postMessage’：提供的目标原点 (‘null’) 与接收窗口的原点 (‘null’) 不匹配。”

【问题讨论】：

删除表单或将按钮移出表单

标签： javascript html onclick html5-canvas

【解决方案1】：

当您提交表单时，页面将作为提交过程的一部分重新加载。您要么需要使用 JavaScript 来防止这种默认行为...

 function drawBoard(e){
  e.preventDefault() // stops default form submission
  ...
 }

或者只是删除 form 元素。对于没有输入的按钮单击，不需要表单。

【讨论】：