0

我正在尝试在 Visual Studio Code 中实现 HTML 画布标记，但它不起作用。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="jspsych-6.3.1\jspsych.js"></script>
        <script src="jspsych-6.3.1\plugins\jspsych-html-button-response.js"></script>
        <link href="jspsych-6.3.1\css\jspsych.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100"></canvas>
    <script>

        var finalTimeline = [];

        var example = {
            type: 'html-button-response',
            stimulus: function() {
                var c = document.getElementById("myCanvas");
                var ctx= c.getContext("2d");
                ctx.beginPath();
                ctx.arc(95, 50, 40, 0, 2 * Math.PI);
                ctx.stroke();
            }
        };
        finalTimeline.push(example);

        jsPsych.init({
            timeline: finalTimeline
        });

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

当我尝试运行代码时，我在调试器控制台中收到以下消息：“未捕获的 TypeError：无法读取 null 的属性（正在读取 'getContext'）。”

我知道这个网站上的其他人也遇到了同样的问题，但是在查看了他们的一些线程后，似乎他们的问题是他们没有将 canvas 元素添加到他们的 DOM 中，即他们没有将元素放在里面身体标签。但是，我的画布元素在正文标签内，所以我不确定为什么我的计算机无法识别它。

有没有人遇到过这个问题？如果是这样，请您分享您对解决它的想法吗？

编辑：问题似乎与在 jsPsych 函数中调用 canvas 元素这一事实有关。当我使用常规 JavaScript 实现代码时，它工作正常。

4

0 回答 0