Node.js Canvas 畫圖

Tags:

簡中版

PHP 用來畫圖的 Library 叫做 PHP GD ，而 Javascript 有個　library 叫 canvas ，也是用來畫圖的，有人已經在 Node.js 開發出 Node.js Canvas ，我們只要安裝這個 Package ，就能在 Server 端寫程式來畫圖。

Node.js 也有 GD 的版本可以用來畫圖，但是我不建議做用 GD ，原因為若我們使用 Canvas 來畫圖，那麼也同時可以學會在 Browser 裡使用 Canvas ，一次學會 Web Server 端與 Client 端的畫圖方式。

下面這個網址有一些簡單的使用範本

http://thechangelog.com/node-canvas-render-and-stream-html5-canvas-using-node-js/
git@github.com:Automattic/node-canvas.git

Node.js Canvas 有用到其它的　Open Source ，所以我們也得安裝這些　library　，我的系統是 CentOS ，平常都是使用 yum 來安裝　Package。

sudo yum install pango-devel
sudo yum install cairo-devel
sudo yum install giflib-devel
sudo yum install libpng-devel

安裝好以上 Package 後，再來就用 npm install 來裝上　　canvas

npm install canvas

來畫一張 Canvas Hello World 吧

Example

var Canvas = require('canvas'),
    canvas = new Canvas(150, 150),
    ctx = canvas.getContext('2d'),
    fs = require('fs');
 
var out = fs.createWriteStream(__dirname + '/image.png')
  , stream = canvas.createPNGStream();
 
stream.on('data', function(chunk){
  out.write(chunk);
});
 
//在左邊畫正方形
ctx.fillStyle = '#A00'    
ctx.fillRect(0, 30,50,50);   
ctx.save();    
 
//在右邊畫正方形
ctx.fillStyle = '#aaa'    
ctx.fillRect(50, 30, 50, 50);
 
//畫文字
ctx.fillStyle = "#000";
ctx.font = "20px Arial";
ctx.fillText("Hello World", 0, 20);
 
//畫一個圓
ctx.beginPath();
ctx.arc(30, 110, 20, 0, 2*Math.PI);
ctx.stroke();
ctx.fillStyle = "green";                                                                                                                          
ctx.fill();

Node.js Canvas 畫圖

相關資料