Articles of html5 canvas

优化我的Node.js / Js / Socket射击游戏

所以在这里,我做了一个小射手游戏只是为了玩和在我的电脑上运行良好,但与互联网/function较差的电脑(例如在学校/我的朋友很less)的人是相当滞后,这是我的第一个canvas所以我不确定通常的优化技术。 我通过套接字将客户端信息以及其他玩家信息(只有客户端需要的最低限度)发送给客户端60秒钟。 对不起,这个问题有点模糊,基本上只是寻找优化技巧。 如果需要更多的代码,只需要问! 谢谢! 这是我的绘图function: function draw() { ctx.clearRect(0, 0, canvas.width,canvas.height); //grey background ctx.fillStyle="rgba(128, 128, 128, 0.15)"; ctx.fillRect(0, 0,canvas.width, canvas.height); //drawing background grid for(var pos = 25;pos<5000;pos+=25) { ctx.beginPath(); ctx.strokeStyle = "rgba(128, 128, 128, 0.75)"; ctx.lineWidth="1"; ctx.moveTo(0, pos-player.y+pos); ctx.lineTo(canvas.width, pos-player.y+pos); ctx.stroke(); } for(var pos = 25;pos<5000;pos+=25) { ctx.beginPath(); ctx.strokeStyle = "rgba(128, 128, 128, 0.75)"; […]

如何查看由Socket IO发送的数据?

我正在开发一个使用SocketIO和NodeJS的游戏。 然而,游戏目前发送的数据太多,我想通过检查每帧发送的数据来找出原因。 我怎样才能做到这一点?

HTMLcanvas:两个客户端在同一时间写入

我在使用nodejs作为客户端之间的服务器实现在线 HTML5 Canvas时遇到了麻烦。 一个单独的用户可以单独绘画而没有问题,但是当另一个客户端进来并且同时绘画时 ,会发生以下情况: Client1是第一个客户端鼠标的(X,Y)位置, Client2是第二个客户端的(X,Y)位置。 所以当第二个客户端绘制的时候, 我的程序在这两个点之间画了一条线 。 在这里,您可以浏览客户机JS代码,其中绘图函数负责绘制从nodejs服务器接收到的数据: App.draw = function(x, y, type, color, clear) { if(clear != true) { App.ctx.strokeStyle = color; if (type === "dragstart") { App.ctx.beginPath(); //alert("Me muevo a X: " + x + " e Y: " + y); return App.ctx.moveTo(x, y); } else if (type === "drag") […]

使用fabric.js渲染和操作node.js中的服务器端canvas

我试图在node.js上使用fabric.js(v0.9.21,通过npm在Ubuntu 12.04上安装)来渲染服务器上的canvas(稍后可以在没有客户端交互的情况下进行操作和扩展)。 为了进行实验,我在客户端创build了一个简单的canvas,然后使用canvas.toJSON()方法将其导出到JSON。 当我尝试使用那个JSON重新加载canvas时,它工作得很好(利用canvas.loadFromJSON() )。 你可以在这个小提琴中看到整个例子。 (如果它不起作用,那么图像可能已过期 – replace链接)。 然后我尝试使用这个简单的脚本在服务器端做同样的事情: var fabric = require('fabric').fabric; var fs = require('fs'); var canvas = fabric.createCanvasForNode(570, 600); fs.readFile('kitty.json', 'utf8', function(err, data) { canvas.loadFromJSON(data); }); 当我运行这个脚本(使用node script.js或require('./script.js') from inside node时,我得到一个奇怪的崩溃: > http.createClient is deprecated. Use `http.request` instead. /usr/lib/node_modules/fabric/dist/all.js:12429 ctx.drawImage( ^ Error: Image given has not completed loading at klass.fabric.Image.fabric.util.createClass._render (/usr/lib/node_modules/fabric/dist/all.js:12429:11) […]

canvas图像质量问题

我试图模拟canvas中的background-size: cover属性。 我得到了它的工作,但质量很差。 这是一个小提琴 。 你可以比较这两个图像(缩小,所以你可以看到两个图像相邻): 我的代码如下所示: function drawImageProp(ctx, img, x, y, w, h, offsetY) { var iw = img.width, ih = img.height, r = Math.min(w / iw, h / ih), newW = iw * r, newH = ih * r, cx, cy, cw, ch, ar = 1; if (newW < w) ar = w […]

nodejs:使用socket.io更新html5canvas白板

我正在尝试创build交互式白板应用程序。 我想要做的是,无论是在sender.html上绘制应更新receiver.html,但它是行不通的。 这是代码 – sender.html和iwb-sender.js var socket; function startSocket() { socket = io.connect(); } function sendData(coordx, coordy, actualColor) { var data = { x: coordx, y: coordy, color: actualColor }; socket.emit("iwb-message", data); } <!DOCTYPE html> <html> <head> <title>A web whiteboard</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><meta charset="utf-8"> <script src="https://cdn.socket.io/socket.io-1.3.2.js"></script> <script src="wb/wb-client.js" type="text/javascript"></script> <script src="iwb/iwb-sender.js" type="text/javascript"></script> […]

用V8 / node.js创build一个空的PixelArray

我想能够做一个空的PixelArray与来自JavaScript内的节点canvas的输出进行比较。 例如: var cleanData = new PixelArray ( 20 ); 这可能吗? 我在错误版本的Node.js? (0.8.3)

如何使用使用粒子的HTML5 <canvas>

http://craftedbygc.com/这是url,我想使用我自己的标志这样的HTMLcanvas。 使用canvas粒子的URL但是我很难完成它,任何人都可以帮助我理解这一点,关于如何在HTML-canvas中实现这一点,是否有任何工具来创buildcanvas代码或类似这样的代码我从这个网站进行了检查。 <div id="particle-slider"> <div class="slides"> <div class="slide" data-src="http://img.nodejscore.com/javascript/logo.png"></div> </div> <canvas class="draw" id="canvas-particle" width="1279" height="403"></canvas> <canvas width="351" height="397" style="display: none;"></canvas><canvas style="display: none;"></canvas><canvas style="display: none;"></canvas><p></p></div>

我应该使用什么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推出即可 – 随时随地绘制所有画面。 任何有关实施的具体或哲学的指导,赞赏。 谢谢!