Javascript 按钮从一页转到另一页_Javascript_Canvas_Transition

Javascript 按钮从一页转到另一页

javascript canvas

Javascript 按钮从一页转到另一页,javascript,canvas,transition,Javascript,Canvas,Transition,所以我已经研究了页面到页面的函数，并看到了混合技术我有一个完整的画布动画与点击和键盘功能和所有，但我想有一个屏幕是空白的，只是有一个按钮，说开始我需要创建一个新的html文件吗？还是一个清除画布并在画布上设置按钮以过渡到动画的函数？一般的设置是什么样子的？相同的页面解决方案创建一个div容器。使容器中的所有内容都显示除“开始”按钮之外的“无”。当按下开始按钮时，会运行一个JS函数，该函数将容器中的所有内容设置为适当的显示属性，并使开始按钮不可见。并不是说操纵DOM是一项代价高昂的操作，而且

所以我已经研究了页面到页面的函数，并看到了混合技术

我有一个完整的画布动画与点击和键盘功能和所有，但我想有一个屏幕是空白的，只是有一个按钮，说开始

我需要创建一个新的html文件吗？还是一个清除画布并在画布上设置按钮以过渡到动画的函数？一般的设置是什么样子的？

相同的页面解决方案
创建一个

div

容器。使容器中的所有内容都显示除“开始”按钮之外的“无”。当按下开始按钮时，会运行一个JS函数，该函数将容器中的所有内容设置为适当的显示属性，并使开始按钮不可见。并不是说操纵DOM是一项代价高昂的操作，而且应该少做。

HTML

<body>
  <div>
    <canvas id="myCanvas"></canvas>
    <button id="btn" onclick="start(this.id)">Start</button>
  </div>
</body>

JS var start=函数（id）{ var c=document.getElementById（“myCanvas”）； c、 style.display=“内联块”； var btn=document.getElementById（id）； btn.style.display=“无”； }

您也可以为画布创建一个新的html页面。取决于您。

您甚至可以在画布上放置一个div，两者都位于同一个dom下。单击时，div设置为不可见。非常有用！我当然更喜欢这个，而不是有一个新的html页面。函数和按钮之间的关系让我很困惑，但我想我现在明白了。如果你喜欢这个，你应该看看JavaScript SPA（单页应用程序）框架，比如AngularJS或React。一旦你学会了如何使用它们，像这样的事情就很容易做了。

#myCanvas {
  display: none
}

#btn {
  margin: 0 auto;
}

div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

html {
  height: 100%
}

body {
  height: 100%
}

document.addEventListener("DOMContentLoaded", function(event) {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
});