如何从 js-dosbox 创建的 Canvas 中获取像素

Question

我已经通过 dosbox Div 找到了 canvas，但是一旦我找到了持有 canvas 的节点，我该如何引用它？

获取 dbGranChild[0] 的上下文只会导致错误..

我正在尝试构建构成 dosbox window 的像素数组，因此认为使用 canvas 获取图像并随着帧变化循环是一种方法。如果有比我上面的尝试更好的方法，我们很乐意将其作为答案。

代码：http://plnkr.co/edit/MC1n9HfwWcqXlAk95XCO?p=preview

<!doctype html>
    <html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>js-dos api</title>
        <style type="text/css">
        .dosbox-container { width: 640px; height: 400px; }
        .dosbox-container > .dosbox-overlay { background: url(https://js-dos.com/cdn/digger.png); }
        .dosbox-start { font-size: 35px !important; }
        </style>
    </head>
    <body>
        <div id="dosbox"></div>
        <br/>
        <button onclick="dosbox.requestFullScreen();">Make fullscreen</button>

        <script type="text/javascript" src="https://js-dos.com/cdn/js-dos-api.js"></script>
        <script type="text/javascript">
        var dosbox = new Dosbox({
            id: "dosbox",
            onload: function (dosbox) {
            dosbox.run("https://js-dos.com/cdn/digger.zip", "./DIGGER.COM");
            },
            onrun: function (dosbox, app) {
            console.log("App '" + app + "' is runned");
            }
        });
        var dosboxId = document.getElementById('dosbox');
        dbChild = dosboxId.childNodes;
        dbGranChild = dbChild[0].childNodes;
        console.log(dbGranChild[0])

        </script>
    </body>
    </html>

Answer 1

查看 w3Schools tutorial。

首先，您需要使用 <canvas> 标签而不是 <div>。

即替换为：

<div id="dosbox"></div>

像这样：

<canvas id="dosbox" width="200" height="100" style="border:1px solid #000000;">
</canvas>`

其次，替换这段代码：

var dosboxId = document.getElementById('dosbox');
dbChild = dosboxId.childNodes;
dbGranChild = dbChild[0].childNodes;
console.log(dbGranChild[0])

像这样：

var c = document.getElementById("dosbox");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

如何从 js-dosbox 创建的 Canvas 中获取像素

How do I get pixels from Canvas created by js-dosbox

javascript

dosbox