Блог

Я пытаюсь реализовать тег HTML canvas в коде Visual Studio, но он не работает.

Вот мой код:

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;Testlt;/titlegt;  lt;script src="jspsych-6.3.1jspsych.js"gt;lt;/scriptgt;  lt;script src="jspsych-6.3.1pluginsjspsych-html-button-response.js"gt;lt;/scriptgt;  lt;link href="jspsych-6.3.1cssjspsych.css" rel="stylesheet" type="text/css"/gt;  lt;/headgt;  lt;bodygt;  lt;canvas id="myCanvas" width="200" height="100"gt;lt;/canvasgt;  lt;scriptgt;   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  });   lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

Когда я пытаюсь запустить код, я получаю следующее сообщение в консоли отладчика: «Ошибка типа не обнаружена: Не удается прочитать свойства null (чтение «getContext»)».

Я знаю, что другие люди на этом веб-сайте сталкивались с той же проблемой, но, просмотрев некоторые из их тем, кажется, что их проблема заключалась в том, что они не добавили элемент canvas в свой DOM, т. Е. Они не поместили элемент в теги тела. Однако мой элемент canvas находится в тегах тела, поэтому я не уверен, почему мой компьютер не распознает его.

Кто-нибудь сталкивался с этой проблемой раньше? Если да, не могли бы вы поделиться своими мыслями о ее решении?

Изменить: Проблема, по-видимому, связана с тем фактом, что элемент canvas вызывается внутри функции jsPsych. Когда я реализую код с помощью обычного JavaScript, он работает нормально.