无法使用Canvas标记获取HTML/Javascript页面以绘制分数

Cannot get HTML/Javascript page to draw fraction using Canvas tag

本文关键字：Javascript 绘制 HTML Canvas 获取      更新时间：2023-09-26

我正试图获得以下带有嵌入式Javascript的HTML5页面，根据所选分子和支配者绘制一个圆圈的分数。

该代码是由@Vanojx1建议的，但我的帖子被关闭了，因为它不够"具体"，我只想得到一些帮助，了解我做错了什么，请：

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="">
    <meta name="description" content="Fraction Learning app for Children">
    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var pi = Math.PI;

        document.getElementById("draw").addEventListener("click", function () {
            var num = document.getElementById("num").value;
            var den = document.getElementById("den").value;
            var rad = 2 / den * num * pi;
            var cx = 250;
            var cy = 250;
            ctx.clearRect(0, 0, 500, 500);
            ctx.beginPath();
            ctx.moveTo(cx, cy);
            ctx.arc(cx, cy, 220, 1.5 * pi, 1.5 * pi + rad);
            ctx.lineTo(cx, cy);
            ctx.fillStyle = "#FF0000";
            ctx.fill();
            ctx.closePath();
            ctx.stroke();
        });
    </script>
    <title>Fractions Fun</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<br>
<input type="number" id="num" /> /
<input type="number" id="den" />
<br>
<button id="draw">
    DRAW
</button>

</body>
</html>

HTML按照其在DOM（包括script块）中出现的顺序呈现。因此，脚本块将在渲染draw之前运行。由于draw不存在，脚本无法添加单击处理程序。

将代码放入函数中，并使用body的onload事件调用它，将允许添加单击处理程序。见下文-

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="">
  <meta name="description" content="Fraction Learning app for Children">
  <script type="text/javascript">
    function init() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var pi = Math.PI;
      document.getElementById("draw").addEventListener("click", function() {
        var num = document.getElementById("num").value;
        var den = document.getElementById("den").value;
        var rad = 2 / den * num * pi;
        var cx = 250;
        var cy = 250;
        ctx.clearRect(0, 0, 500, 500);
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.arc(cx, cy, 220, 1.5 * pi, 1.5 * pi + rad);
        ctx.lineTo(cx, cy);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
        ctx.closePath();
        ctx.stroke();
      });
    }
  </script>
  <title>Fractions Fun</title>
</head>
<body onload="init()">
  <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
  <br>
  <input type="number" id="num" />/
  <input type="number" id="den" />
  <br>
  <button id="draw">
    DRAW
  </button>
</body>

我看到的另一种方法是将script标记放在文档的末尾（尽管我不确定这是否被认为是最佳实践，我自己也不使用它）-

<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="">
  <meta name="description" content="Fraction Learning app for Children">
  <title>Fractions Fun</title>
</head>
<body>
  <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
  <br>
  <input type="number" id="num" />/
  <input type="number" id="den" />
  <br>
  <button id="draw">
    DRAW
  </button>
  <script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var pi = Math.PI;
    document.getElementById("draw").addEventListener("click", function() {
      var num = document.getElementById("num").value;
      var den = document.getElementById("den").value;
      var rad = 2 / den * num * pi;
      var cx = 250;
      var cy = 250;
      ctx.clearRect(0, 0, 500, 500);
      ctx.beginPath();
      ctx.moveTo(cx, cy);
      ctx.arc(cx, cy, 220, 1.5 * pi, 1.5 * pi + rad);
      ctx.lineTo(cx, cy);
      ctx.fillStyle = "#FF0000";
      ctx.fill();
      ctx.closePath();
      ctx.stroke();
    });
  </script>
</body>

相关文章：