Question

我可以在画布上绘制图像而没有任何问题。但我希望在新窗口中在画布上绘制图像。变量具有正确的值，但仍然没有绘制任何内容。

这是我的代码：

var popup = window.open();

popup.oldCanvas= oldCanvas;

popup.url = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

popup.document.open();

popup.document.write("<html><head>");

popup.document.write('<script src="lib/jquery/jquery-2.1.1.min.js"></script>');

popup.document.write("<script>\n");

popup.document.write("$(document).ready(function() { \n");

popup.document.write("    function createCanvas() {                         \n");

popup.document.write("        var img = new Image;\n");

popup.document.write("        var newCanvas = document.createElement('canvas');\n");

popup.document.write("        var context = newCanvas.getContext('2d');        \n");

popup.document.write("        newCanvas.width = oldCanvas.width;           \n");

 popup.document.write("        newCanvas.height = oldCanvas.height;         \n");

popup.document.write("        img.onload = function() {\n");

popup.document.write("              context.drawImage(this, 0, 0);                    \n");

popup.document.write("        };                                                \n");

popup.document.write("        img.src = url;                                    \n");

 popup.document.write("    };                                                   \n");

popup.document.write("    createCanvas();                                      \n");

popup.document.write("});                                                      \n");

popup.document.write("</script>");

popup.document.write("</head><body>");

popup.document.write("</body>");

popup.document.write("</html>");

popup.document.close();

请告诉我我做错了什么，因为相同的代码在未在新窗口中绘制时工作正常。

Answer 1

画布已创建但从未插入DOM：

var newCanvas = document.createElement('canvas');
document.body.appendChild(newCanvas);              // add to DOM
...

在新窗口中打开时，图像未在画布中绘制

1 个答案: