包括原始 HTML 节点到 canvas 元素

Question

我想结合 canvas-slider-response plugin and RDK plugin 创建响应试验，观察者使用滑块改变运动场的连贯性。

RDK 插件创建一个 canvas 元素并将其附加到 DOM 以在 canvas 上绘制点。因为我想要滑块功能，在RDK插件里面，我添加了HTML element:

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;

当然，这会覆盖 canvas，显示 HTML 元素，但现在点消失了（canvas 被覆盖了？）。

我有点意识到将 HTML 渲染成 canvas 出于安全原因受到严格限制。所以尝试了一些模拟：

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

等方法与图像进行交互

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

3- 我认为 JsPsych 中的 HTML 渲染器可以解决我的问题。所以我尝试将 RDK 作为刺激函数包含在 canvas-滑块响应中，但我找不到在 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];
    }
};

我是不是漏掉了一个简单的步骤？

这是想要的图片：

Answer 1

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

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

解决了我的问题。

包括原始 HTML 节点到 canvas 元素

including raw HTML node to canvas element

javascript

html

canvas

jspsych