在 node-js/Express 的画布上绘制图形答案

【问题标题】：Drawing graphics on canvas in node-js/Express在 node-js/Express 的画布上绘制图形
【发布时间】：2017-05-18 04:22:33
【问题描述】：

我想在画布元素上绘制图表。我的 Jade 文件包含以下内容：

div
   canvas

在 node.js Web 应用程序的 index.js 文件中，我尝试了以下操作：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle = "rgba(255, 0, 0, 1)";
height = canvas.height;
width = canvas.width;
context.moveTo(0, 0);
context.lineTo(width, height);
context.lineWidth = 1;
context.stroke();

但是，它无法识别“文档”。我的问题是如何在我的 .js 文件中获取对“canvas”的引用？请注意，为简洁起见，实际图表将比上面显示的简单线条绘制代码更复杂。图表的数据在服务器端的 index.js 文件中生成。所以图表将在服务器上创建。

【问题讨论】：

标签： node.js express pug

【解决方案1】：

NodeJS 无法获取对用户浏览器的引用以在显示的页面上绘图。虽然它是 Javascript，但 NodeJS 在服务器端执行。必须在您的 HTML 页面中编写相同的代码。

如果你的绘图需要一些来自后端 NodeJS 逻辑的数据，那么页面 Javascript 将不得不调用你的 NodeJS 服务来获取相关数据。

【讨论】：

我尝试在 index.js 文件中编写相同的代码，如下所示：res.render('chart'); console.log("绘图图表"); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath();它给了我关于“文档”的错误
我也尝试添加代码 - var context = canvas.getContext('2d');在我的玉文件中。它给了我错误“getContext”未定义
index.js 将在服务器端运行，因此它无法访问客户端浏览器。您的网页必须是独立的，有时必须在一个完全不同的应用程序中。 Jade 是一个简单的静态内容模板引擎，不允许动态视图。使用 express 中的 router 将特定 URL 路由到您创建的 HTML 页面并在 HTML 中运行代码。然而，HTML 将无法直接访问您的 NodeJS 后端。托管 NodeJS Web 服务也必须这样做。
感谢您的帮助和指导。根据您的指南进行了几次实验后，我使用“脚本”进行了实验并解决了这个问题。玉文件中的标记。这允许我在玉文件中编写 Javascript 代码。 Jade 编译器将其编译为 HTML 中的

【解决方案2】：

截至 2021 年 8 月，可以使用 Node.js 在 Canvas 上绘图 https://github.com/Automattic/node-canvas

【讨论】：