jquery - Html5 canvas 无法使用 jquery 在 Div 中绘制

Question

好的。所以基本上我有一个 div，我想用一个包含一些 html5 Canvas 的文件加载它。当我加载文件时它就可以工作了。问题是当我正常加载网站并按链接加载 div 中的同一文件时，我希望它不会绘制。

我使用 $('#container').load('mycanvas.html');使用 .click 事件加载文件

下面的代码是 mycanvas.html 文件中的代码。

<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  #myCanvas {
    border: 1px solid #9C9898;
  }
</style>
<script>
  window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(100, 150);
    context.lineTo(450, 50);
    context.stroke();
  };

</script>

<canvas id="myCanvas" width="500" height="200"></canvas>

我做错了什么？

Answer 1

对 mycanvas.html 尝试此操作。

<style>
  body {
    margin: 0px;
    padding: 0px;
  }
  #myCanvas {
    border: 1px solid #9C9898;
  }
</style>

<canvas id="myCanvas" width="500" height="200"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(100, 150);
    context.lineTo(450, 50);
    context.stroke();

</script>