Tag: html5 canvas

使用JSBarCode创build条形码

我正在使用JSBarCode来尝试生成资产的条形码。 我需要能够创build一个静态条码然后我想我可以自己dynamic的部分。 我的代码到目前为止是从上面的链接中find的文档直接复制。 我会认为这个文档将给出一个工作的例子，以我的代码为基础。 也许我做错了代码，我有下面的代码，我已经做了NPM安装已经为jsbarcode和canvas。 服务器端代码： var JsBarcode = require('jsbarcode'); var Canvas = require("canvas"); var canvas = new Canvas(); JsBarcode(canvas, "Hello"); JsBarcode(".barcode").init(); HTML： <svg class="barcode" jsbarcode-format="upc" jsbarcode-value="123456789012" jsbarcode-textmargin="0" jsbarcode-fontoptions="bold"> </svg> 当我尝试运行我的节点应用程序时出现错误。 这是很长的，对我来说不是很有用，但希望你们中的一个人能理解它。 这里是： /home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:84 var selector = document.querySelectorAll(string); ^ ReferenceError: document is not defined at querySelectedRenderProperties (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:84:26) at getRenderProperties (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/help/getRenderProperties.js:37:10) at JsBarcode (/home/ubuntu/workspace/asset-management/node_modules/jsbarcode/bin/JsBarcode.js:63:60) at Object.<anonymous> […]

在多个套接字上定位在canvas上

所以我正在尝试使用socket.io和HTML5canvas来制作节点多人游戏。 我已经得到的对象出现在彼此的客户端canvas上，但他们的位置是离开的。 如何定位这些对象，以便它们在客户端正确显示？ 这是我的代码。 客户： var socket; var ship; var cnv; function setup() { cnv = createCanvas(1000, 1000); translate(120, 120); var x = (windowWidth – width) / 2; var y = (windowHeight – height) / 2; cnv.position(x, y); background(51); socket = io('http://localhost:3000'); ship = new Avatar(); socket.on('pos', newDrawing) var data = { x:ship.pos.x, y:ship.pos.y, r:ship.r, […]

HTML5video录制

我想通过在服务器端使用HTML5特性+ Node.js创build一个简单的videostream应用程序（实际上我不知道这是可能的…）。 现在我有一些重要的问题： 是否有可能logging由navigator.getUserMedia（）API创build的本地stream？ 我阅读了很多文章，但到处都是用来定义HTML5video元素的来源。 可以通过websockets发送这个stream吗？ （socket.io，binaryjs，…？）。 否则，我只能想象发送帧到一个canvas元素，我不知道这是一个很好的解决scheme。 有没有支持负载平衡的Node.js模块？ 使用不同的节点服务器会很有趣。 谢谢大家。

优化我的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）