canvas画布会黑屏吗,通过canvas.toDataURL将画布保存到图像会生成黑色矩形

Im using Pixi.js and trying to save a frame of the animation to an image. canvas.toDataUrl should work, but all i get is a black rectangle. See live example here

the code I use to extract the image data and set the image is:

var canvas = $('canvas')[0];

var context = canvas.getContext('2d');

$('button').click(function() {

var data = renderer.view.toDataURL("image/png", 1);

//tried var data = canvas.toDataURL();

$('img').attr('src', data);

})

解决方案

[NOTE]

While this answer is the accepted one, please do read the one by @gman just below, it does contain a way better way of doing.

Your problem is that you are using webGL context, then you need to set the preserveDrawingBuffer property of the webGL context to true in order to be able to call toDataURL() method.

Or alternatively, you can force pixi to use the 2D context, by using the CanvasRenderer Class