使用Node.js和EJS在canvas上绘制图像

所以,我是Node新手,build立一个练习网站,用户可以在校园地图上的任何位置login并创build聊天室,或者join现有的聊天室。 我有我的Mongo架构等工作。 只是在按照我想要的方式渲染我的模型时遇到一些麻烦。

基本上,我试图使用canvas先绘制地图,然后绘制所有现有聊天室的位置指针。

这是我的控制器:

var db = require('../models') module.exports = function(req, res) { // finds all the current chatrooms and passes them to the // the campus map to be rendered db.Chatroom.find().exec(function(err, chatrooms) { if (err) throw err; res.render('map.ejs', { title: "Campus Map", chatrooms : chatrooms }) }); }; 

这是我的观点:

 <% include header.ejs %> <script type="text/javascript"> var images = {}; /* Pre-loads the images so they can be drawn in order. */ function loadImages() { var sources = ["campus_map.png", "icon.png"] var loadedImages = 0; for (var src in sources) { images[src] = new Image(); images[src].onload = function() { if(++loadedImages >= 2) { drawImages(); } }; images[src].src = sources[src]; } } /* Draws the map and all the current chatroom locations onto the canvas. */ function drawImages() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; ctx.drawImage(images[0], 0, 0, window.innerWidth, window.innerHeight); chatrooms.forEach(function(chatroom) { ctx.drawImage(images[1], chatroom.x_coordinate + 10, chatroom.y_coordinate + 20, 20, 20); } } </script> </head> <body onload="loadImages();"> <canvas id="canvas"></canvas> <% include footer.ejs %> 

我想我的问题是,我试图访问我的控制器(聊天室)在我的脑海中的脚本块传递给视图的上下文,但我真的不知道如何解决这个问题。

任何指导将非常感谢! 谢谢。