Question

我正在使用https://github.com/Automattic/node-canvas在我的node.js应用程序中创建一个canvas元素，如下所示：

const canvasLibrary = require('canvas');
const canvas = new canvasLibrary(200, 200);
const canvasCtx = canvas.getContext('2d');

// Write "Awesome!"
canvasCtx.font = '30px Impact';
canvasCtx.rotate(0.1);
canvasCtx.fillText('Awesome!', 50, 100);

// Draw line under text
var text = canvasCtx.measureText('Awesome!');
canvasCtx.strokeStyle = 'rgba(0,0,0,0.5)';
canvasCtx.beginPath();
canvasCtx.lineTo(50, 102);
canvasCtx.lineTo(50 + text.width, 102);
canvasCtx.stroke();

我想打开一个新窗口，它不断呈现画布的当前状态，就像我在HTML前端网站中绘制画布元素一样。这是可以用node.js吗？

Answer 1

有可能：

socket.io：服务器和客户端（实时需要）
express：为客户提供服务

一个简单的例子（没有socket.io）：

只有使用快递，您才能在使用GET访问路径时实现这一点（使用浏览器打开网站，例如： host.com/show ）

router.get('/show', function (req, res, next) {
  res.setHeader('Content-Type', 'image/png');
  canvas.pngStream().pipe(res);
});

这个例子效率不高，因为每次访问网站时，您都会将画布流式传输到png并将其输入（发送状态）响应，如果执行了更改，则路径必须是重新加载以获得新状态。

如果添加一层socket.io通信，您甚至可以使所有客户端（或只有部分具有授权）同时编辑画布，并将更改广播到所有连接的客户端。（实时画布编辑）

希望这有助于作为一个起点。

编辑：＃node-canvas相关：

NodeJS在浏览器窗口中渲染画布

1 个答案: