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

【问题标题】：including raw HTML node to canvas element包括原始 HTML 节点到画布元素
【发布时间】：2021-01-26 06:18:36
【问题描述】：

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

RDK 插件创建一个画布元素并将其附加到 DOM 以在画布上绘制点。因为我想要滑块功能，所以在 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];
    }
};

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

这是想要的图片：

【问题讨论】：

标签： javascript html canvas jspsych

【解决方案1】：

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

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

解决了我的问题。

【讨论】：