如何在Three.js中将画布添加到场景中？

Question

我有使用Three.js构建的3D散点图。我想在场景中添加一个HTML5画布图形，以使图形显示在页面的某个位置上。

为了更好地解释，这里是散点图的小提琴： http://jsfiddle.net/jmg157/ynFzw/6/

而且我们说，我想补充的下图的左下角（或右）页面（这将最终是图的说明）：

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.rect(3, 3, 300, 200); 
context.fillStyle = 'white'; 
context.fill(); 
context.lineWidth = 3; 
context.strokeStyle = 'black'; 
context.stroke(); 
context.font = "20px Verdana"; 
context.fillStyle = "#000"; 
context.fillText("Legend", 120, 25); 

谢谢你有关如何去做这件事的任何帮助/建议。

Answer 1

这里是你可以遵循一个模式：

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
context.beginPath(); 
context.rect(3, 3, 150, 100); 
context.fillStyle = 'white'; 
context.fill(); 
context.lineWidth = 3; 
context.strokeStyle = 'black'; 
context.stroke(); 
context.font = "20px Verdana"; 
context.fillStyle = "#000"; 
context.fillText("Legend", 40, 25); 

canvas.style.position = 'absolute'; 
canvas.style.top = (window.innerHeight - 100 - 10) + 'px'; 
canvas.style.left = '10px'; 
canvas.style.margin = '0px'; 
canvas.style.padding = '0px'; 

document.body.appendChild(canvas); 

你的小提琴更新：http://jsfiddle.net/ynFzw/7/