Articles of html5 canvas

我应该使用什么HTML5 Canvas工具来构build纸牌游戏?

我正在使用HTML5 Canvas和JavaScript创build一个纸牌游戏,我想知道哪些Canvas工具可以使我的生活更轻松。 我find了CreateJS ,并对它做了一些说明: 用于简化与HTML5 / CSS / JS的复杂交互的库/工具套件 EaselJS – HTML5 Canvas顶层的抽象层 SoundJS – HTML5audio的抽象层 TweenJS – 用于animationHTML5和CSS属性(酷炫演示)的库 PreloadJS – 用于预加载资源(JS,图像,声音,数据等)的库 文件似乎彻底 大量的演示 ; 没有入门指南/教程被发现 免费和开源 (由Adobe和微软赞助) 还有哪些其他工具/引擎可以用来制作浏览器的纸牌游戏呢? 在HTML5 Canvas之外帮助我的工具/框架的奖励点。 我在后端使用Node.js,并计划使用Socket.IO/Express/MongoDB,因为这就是我所知道的。 注意:我已经收集了一些有关游戏引擎/工具的注释(包括上面的CreateJS注释)。 随意添加您的观点这个文件。

Node.js白板应用程序的客户端或服务器端HTML5canvas渲染?

我在想一个小白板Web应用程序将是一个很好的方式来提高我的node.js和JavaScript技能。 我在网上看过几个,这对于这种堆栈来说似乎是理想的。 不过花点时间思考一下,我想知道在这种Web应用程序中,客户端和服务器的angular色。 在节点canvas上陷入困境,我变得更加困惑。 什么,具体来说,客户端和服务器应负责? 如果服务器能够渲染到canvas上,是否应接受并validation来自客户端的input,然后通过socket.io将其广播给所有其他连接的用户? 通过这种方式,服务器保持一种主要的 -canvas元素。 一旦有新用户连接,服务器只需将其客户端的canvas推出即可 – 随时随地绘制所有画面。 任何有关实施的具体或哲学的指导,赞赏。 谢谢!

Nodejs:nodejs中的Kineticjs

我在nodejs中安装包Kineticjs,并有以下错误消息: Kinetic.window = Kinetic.document.createWindow(); ^ TypeError: undefined is not a function at /kinetic/kinetic.js:608:47

如何在nodejs中获取video的快照?

我正在尝试编写一个nodejs服务器,它需要一个时间input(可能是urlpath的一部分),然后在这个时间索引提供一个静止的video帧作为JPEG图片。 我可以用简单的Javascript轻松地做到这一点,但我不能在nodejs中做到这一点。 我知道我可能需要使用像canvas一样的canvas插件来做快照。 任何想法欢迎。 以下是我现在用Javascript做的事情: myjavascript.js function capture(video, scaleFactor) { if(scaleFactor == null){ scaleFactor = 1; } var w = video.videoWidth * scaleFactor; var h = video.videoHeight * scaleFactor; stdout("<br/> w: "+ w+ "<br/> h: "+ h); var canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; var ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, w, […]

nodejs – 如何将文件中的图像数据添加到canvas

下面的代码应该读取一个图像文件,然后在Canvas模块的帮助下将文件数据添加到canvas中。 当我运行此代码时收到错误消息图像未定义 。 是我想从我简单导入的模块初始化的图像对象? var http = require('http'), fs = require('fs'), Canvas = require('canvas'); http.createServer(function (req, res) { fs.readFile(__dirname + '/image.jpg', function(err, data) { if (err) throw err; img = new Image(); img.src = data; ctx.drawImage(img, 0, 0, img.width / 4, img.height / 4); res.write('<html><body>'); res.write('<img src="' + canvas.toDataURL() + '" />'); res.write('</body></html>'); res.end(); }); […]