2015
Mar
07




PHP 用来画图的 Library 叫做 PHP GD ,而 Javascript 有个 library 叫 canvas ,也是用来画图的,有人已经在 Node.js 开发出 Node.js Canvas ,我们只要安装这个 Package ,就能在 Server 端写程式来画图。

Node.js 也有 GD 的版本可以用来画图,但是我不建议做用 GD ,原因为若我们使用 Canvas 来画图,那么也同时可以学会在 Browser 里使用 Canvas ,一次学会 Web Server 端与 Client 端的画图方式。

下面这个网址有一些简单的使用范本



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
  1. var Canvas = require('canvas'),
  2. canvas = new Canvas(150, 150),
  3. ctx = canvas.getContext('2d'),
  4. fs = require('fs');
  5.  
  6. var out = fs.createWriteStream(__dirname + '/image.png')
  7. , stream = canvas.createPNGStream();
  8.  
  9. stream.on('data', function(chunk){
  10. out.write(chunk);
  11. });
  12.  
  13. //在左边画正方形
  14. ctx.fillStyle = '#A00'
  15. ctx.fillRect(0, 30,50,50);
  16. ctx.save();
  17.  
  18. //在右边画正方形
  19. ctx.fillStyle = '#aaa'
  20. ctx.fillRect(50, 30, 50, 50);
  21.  
  22. //画文字
  23. ctx.fillStyle = "#000";
  24. ctx.font = "20px Arial";
  25. ctx.fillText("Hello World", 0, 20);
  26.  
  27. //画一个圆
  28. ctx.beginPath();
  29. ctx.arc(30, 110, 20, 0, 2*Math.PI);
  30. ctx.stroke();
  31. ctx.fillStyle = "green";
  32. ctx.fill();

相关资料


回應 (Leave a comment)