node.js - Create canvasbitmap in pure Javascript (No html) - Stack Overflow

admin管理员组

文章数量:1316515

I'm developing a server for a iPhone game in Javascript with socket.io. The servers purpose is to draw a offscreen bitmap with the players path in order to check if that path is already draw. Simply put, all of the drawing will only be shown on the client screen. Here is the code I've found for creating a canvas and then finding pixel colors in it. However I've no html code since it's only made using Javascript. So will this code work in a Javascript only program? If not, how can i do something like this but with the same result?

Edit: I'm using socket.io with node.js

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
// Make sure to set the size, otherwise its zero
canvas.width = 100;
canvas.height = 100;

// Draw to the offscreen canvas
context.fillStyle = "#0000ff";
context.fillRect(0,0,50,50);
context.fillStyle = "#ff9900";
context.arc(50,50,25,50,0,Math.PI*2);
context.fill();
//  document.body.appendChild(canvas)
// To preview the canvas
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var offset =  90*canvas.width+50*4

  console.log(imgData.data[offset]);
  console.log(imgData.data[offset+1]);
  console.log(imgData.data[offset+2]);
  console.log(imgData.data[offset+3]); 

I'm developing a server for a iPhone game in Javascript with socket.io. The servers purpose is to draw a offscreen bitmap with the players path in order to check if that path is already draw. Simply put, all of the drawing will only be shown on the client screen. Here is the code I've found for creating a canvas and then finding pixel colors in it. However I've no html code since it's only made using Javascript. So will this code work in a Javascript only program? If not, how can i do something like this but with the same result?

Edit: I'm using socket.io with node.js

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
// Make sure to set the size, otherwise its zero
canvas.width = 100;
canvas.height = 100;

// Draw to the offscreen canvas
context.fillStyle = "#0000ff";
context.fillRect(0,0,50,50);
context.fillStyle = "#ff9900";
context.arc(50,50,25,50,0,Math.PI*2);
context.fill();
//  document.body.appendChild(canvas)
// To preview the canvas
var imgData = context.getImageData(0, 0, canvas.height, canvas.width);
var offset =  90*canvas.width+50*4

  console.log(imgData.data[offset]);
  console.log(imgData.data[offset+1]);
  console.log(imgData.data[offset+2]);
  console.log(imgData.data[offset+3]); 

• javascript
• node.js
• canvas
• bitmap
• socket.io

Share Improve this question Follow edited Feb 18, 2015 at 18:46 Freddy asked Feb 18, 2015 at 18:30 FreddyFreddy 82011 gold badge99 silver badges1919 bronze badges 3

• In what environment will you run a JavaScript only program, without availability of HTML? I didn't even know that's possible. – Nelson Commented Feb 18, 2015 at 18:34
• Well, I'm not sure what's going on here, but that canvas is never being added to the page. You need an HTML page in order to run Javascript (linked or inline), so this should work: document.body.appendChild(canvas); after your var canvas = ... line. – Scott Commented Feb 18, 2015 at 18:39
• have you even read my post? – Freddy Commented Feb 18, 2015 at 18:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Node.JS + Node-Canvas will accept javascript-only input and will output an image:

https://github./Automattic/node-canvas

本文标签： nodejsCreate canvasbitmap in pure Javascript (No html)Stack Overflow