在纯 Javascript 中创建 canvas/bitmap(否 html)
Create canvas/bitmap in pure Javascript (No html)
我正在 Javascript 和 socket.io 为 iPhone 游戏开发服务器。服务器的目的是绘制一个带有玩家路径的屏幕外位图,以检查该路径是否已经绘制。简单地说,所有的绘图只会显示在客户端屏幕上。这是我找到的用于创建 canvas 然后在其中查找像素颜色的代码。但是我没有 html 代码,因为它只是使用 Javascript 制作的。那么这段代码能在仅 Javascript 的程序中工作吗?如果没有,我怎么能做这样的事情但结果相同?
编辑:我正在使用 socket.io 和 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]);
Node.JS + Node-Canvas 将接受 javascript-only 输入并输出图像:
我正在 Javascript 和 socket.io 为 iPhone 游戏开发服务器。服务器的目的是绘制一个带有玩家路径的屏幕外位图,以检查该路径是否已经绘制。简单地说,所有的绘图只会显示在客户端屏幕上。这是我找到的用于创建 canvas 然后在其中查找像素颜色的代码。但是我没有 html 代码,因为它只是使用 Javascript 制作的。那么这段代码能在仅 Javascript 的程序中工作吗?如果没有,我怎么能做这样的事情但结果相同?
编辑:我正在使用 socket.io 和 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]);
Node.JS + Node-Canvas 将接受 javascript-only 输入并输出图像: