Question

我有一个名为glCanvas的canvas元素。我想在其中添加一些文字。 glCanvas有一个webGL渲染上下文，所以getContext（＆＃39; 2d＆＃39;）不起作用。因此，我创建了一个新的2d画布，并使其成为glCanvas的孩子：

    var Glcanvas = document.getElementById("glCanvas");


    var canvas = document.createElement('canvas');
    canvas.setAttribute("id","canvas");
    canvas.width="512";
    canvas.height="512";
    Glcanvas.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    var text = "element";//overlay.elementIDs[i];

    ctx.beginPath();
    ctx.clearRect(0,0,300,300);
    ctx.fillStyle = 'white';
    ctx.fillRect(0,0,300,300);

    ctx.fillStyle = 'rgba(255,0,0,255)';
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = 'red';
    ctx.save();
    ctx.font = 'bold 80px Verdana';

    var leftOffset = ctx.canvas.width/2;
    var rightOffset = ctx.canvas.height/2;
    ctx.strokeText(text,leftOffset,rightOffset);
    ctx.fillText(text,leftOffset,rightOffset);
    ctx.save();

后来我尝试将glCanvas保存到图像上。

    var imageUrl = glCanvas.toDataURL('image/jpeg', 1.0);

    var pom = document.createElement('a');
    pom.setAttribute('href', imageUrl);
    pom.setAttribute('download', 'image_C' + cameraIndex + '.jpg');

    document.body.appendChild(pom);

    pom.click();

    document.body.removeChild(pom);

在这里，我创建的文本没有得到保存。我如何确保它们都得到保存？

Answer 1

我认为你只想将WebGL画布绘制到2d画布中。

ctx = ctx.getContext("2d");
ctx.drawImage(glCanvas, imageX, imageY);
ctx.fillText("sometext", textX, textY);

现在您可以获得2D画布的屏幕截图

var dataURL = ctx.canvas.toDataURL();

另请注意，除非浏览器不支持画布（此时只有非常旧的浏览器），否则不会显示画布的IIRC子画面。

嵌套画布保存为单个图像

1 个答案: