如何在jspsych画布按钮响应插件中调用复杂函数来绘制刺激？

问题描述

我对 jspsych（以及 javascript、html 和 css）非常陌生，我目前正在进行在线实验。我有一个刺激图像（一个 png 文件），我想在每次试验中保持不变，还有一些 js 代码在我的刺激图像上画一个圆圈。但是，我不能让它在jspsych canvas-button-response插件中工作，我认为原因是我画圆的功能太有问题/复杂，或者我需要另一个插件，或者可能创建一个新插件,使其工作。

这是 javascript 代码，它绘制了我希望它在我的刺激图像上绘制的内容：

container = document.createElement("div")
  image = document.createElement("img")
  circle = document.createElement("canvas")

  document.body.appendChild(container)
  container.appendChild(image)
  container.appendChild(circle)

  container.style.position = "relative";

  image.src = "alien-no-bubble-300.png";
  image.style.position = "absolute";
  image.style.top = 0;
  image.style.left = 0;
  circle.style.zIndex = 0;

  circle.height = 300;
  circle.width = 300;
  circle.style.height = image.style.height;
  circle.style.width = image.style.height;
  circle.style.position = "absolute";
  circle.style.top = 0;
  circle.style.left = 0;
  circle.style.zIndex = 10;
  context = circle.getContext('2d');

  context.beginPath();
  context.arc(150,220,50,2 * Math.PI,false);
  context.linewidth = 5;
  context.strokeStyle = 'black';
  context.stroke();

它自己工作，但是当我试图将它放入一个函数中以在画布按钮响应插件中的画布上绘制时，它没有做任何事情。这是我最近的尝试：

function drawCircOnStim(circle,stim,color) {
        container = document.createElement("div")
        image = document.createElement("img")
        circle = document.createElement("canvas")

        document.body.appendChild(container)
        container.appendChild(image)
        container.appendChild(circle)

        container.style.position = "relative";

        image.src = stim;
        image.style.position = "absolute";
        image.style.top = 0;
        image.style.left = 0;
        circle.style.zIndex = 0;

        circle.height = 300;
        circle.width = 300;
        circle.style.height = image.style.height;
        circle.style.width = image.style.height;
        circle.style.position = "absolute";
        circle.style.top = 0;
        circle.style.left = 0;
        circle.style.zIndex = 10;
        context = circle.getContext('2d');

        context.beginPath();
        context.arc(150,false);
        context.linewidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
        ctx.fillStyle = color;
    }

    var training_trial = {
        type: 'canvas-button-response',prompt: 'Click on the object the alien wants!',stimulus: function(c) {
                drawCircOnStim(c,'stimuli_task/alien-no-bubble-300.png','red')
        },choices: jsPsych.timelineVariable('choices_baseline'),button_html: jsPsych.timelineVariable('button_html_baseline'),data: {condition: jsPsych.timelineVariable('condition')}
    }

我在这里做错了什么？我应该使用另一个插件/创建一个不同的功能吗？任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvas html javascript jspsych