包括原始 HTML 节点到画布元素

如何解决包括原始 HTML 节点到画布元素

我想结合 canvas-slider-response plugin 和 RDK plugin 来创建响应试验，其中观察者使用滑块改变运动场的相干性。

RDK 插件创建一个画布元素并将其附加到 DOM 以在画布上绘制点。因为想要slider功能，所以在RDK插件里面加了HTML元素：

var html = '<div id="jspsych-canvas-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div id="jspsych-canvas-slider-response-stimulus">' + '<canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas>' + '</div>';
html += '<div class="jspsych-canvas-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';

然后使用此方法将该 html 变量添加到 html 元素：

display_element.innerHTML = html;

当然，这会在画布上覆盖，显示 HTML 元素，但现在点不见了（画布被覆盖了？）。

我有点意识到出于安全原因，将 HTML 渲染到画布中受到严重限制。所以尝试了一些模拟：

1- 我可以使用创建 SVG 图像来呈现 html 元素： Rendering HTML elements to <canvas>。但是后来我无法使用 display_element.querySelector('#jspsych-canvas-slider-response-next').addEventListener('click',function () {}

等方法与图像进行交互

2- 我也可以 insertAdjacentHTML 但使用这种方法，画布元素出现在 RDK 元素出现在屏幕上之后——而不是一起出现。 Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)。

3- 我认为 JsPsych 中的 HTML 渲染器可以解决我的问题。所以我尝试将 RDK 作为刺激函数包含在 canvas-slider-response 中，但我找不到在 RDK 插件对象中调用该函数的方法。这就是我试图实现的目标：

var slider_trial = {
    type: 'canvas-slider-response',stimulus: function(c) {
        **callRDKPlugin(c);** ////// Something here /////
    },labels: ['Exactly<br>the same','Totally<br>different'],canvas_size: [200,500],prompt: '<p>How different would you say the colors of these two squares are?</p>',on_finish: function(data) {
        data.color1 = colors[0];
        data.color2 = colors[1];
    }
};

我错过了一个简单的步骤吗？

这是所需的图像：

解决方法

缩短画布（高度）并将 div 节点附加到 HTML，

    var div = document.createElement("div");
    div.innerHTML= html
    display_element.appendChild(div);

解决了我的问题。