1、使用之前需要预先安装  Cairo

  本人安装遇到各种各样的坑,可以参考这里来填坑:https://github.com/Automattic/node-canvas/wiki/Installation---OSX

2、npm install canvas

  安装过程遇到问题,参照第一条填坑的方式继续。。。

3、安装中文字体包,我用的是微软雅黑的字体

  linux 与 mac 字体包的安装方式不同,具体可搜索一下使用方式

4、终于可以愉快编码了

var Canvas = require('canvas')
, Image = Canvas.Image
, canvas = new Canvas(500, 200)
,fs = require("fs")
, ctx = canvas.getContext('2d'); ctx.font = '30px "Microsoft YaHei"';
ctx.rotate(.1);
ctx.fillText("我写程序生成100万个!", 50, 100);
ctx.fillText("怕不怕", 50, 150); var te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx.stroke(); fs.writeFile('out.png', canvas.toBuffer());

生成的图片:

node-canvas的更多相关文章

  1. silverlight 控件自定义样式 实现方法

    1:在app.xaml中加入需实现的样式,如: <Application.Resources> <Style x:Key="NodeStyle" TargetTy ...

  2. unity assetStore 常用插件

    常用插件 20180723============= 教程类 =============<Mecanim Example Scenes > 官方示例场景<Surivial Shoot ...

  3. web实时长图实践--摘抄

    背景简介 全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期长运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题. 产品:能不能在专辑大事件触发时,自 ...

  4. cc.Component

    组件入口函数1: onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点,以及节点关联的资源数据;2: start: 也就是第一次执行 update 之前触发;3: update(d ...

  5. babeljs源码

    babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...

  6. Node.js:进程、子进程与cluster多核处理模块

    1.process对象 process对象就是处理与进程相关信息的全局对象,不需要require引用,且是EventEmitter的实例. 获取进程信息 process对象提供了很多的API来获取当前 ...

  7. 赠书:HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  8. Node学习笔记(三):基于socket.io web版你画我猜(二)

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  9. Node学习笔记(三):基于socket.io web版你画我猜(一)

    经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...

  10. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

随机推荐

  1. linux下编译php追加enable的方法

    如果我们运行php时发现缺少某个库,在windows环境下很简单,找到.dll 对应的库文件,然后拷贝到 extension 目录下,然后在php.ini 里 去掉 前面的分号或者 追加一行 exte ...

  2. OA小助手

    基于 WPF + Modern UI 的 公司OA小助手 开发总结 前言: 距离上一篇博客,整整一个月的时间了.人不能懒下来,必须有个阶段性的总结,算是对我这个阶段的一个反思.人只有在总结的过程中才会 ...

  3. [每日一题] OCP1z0-047 :2013-07-29 视图――别名

    本题的考点是如何创建视图,对于视图的详细知识点,可以参考我的博客: http://blog.csdn.net/guoyjoe/article/details/8614677 好,接下来我们来做测试,先 ...

  4. Python远程视频监控

    Python远程视频监控程序   老板由于事务繁忙无法经常亲临教研室,于是让我搞个监控系统,让他在办公室就能看到教研室来了多少人.o(>﹏<)o||| 最初我的想法是直接去网上下个软件,可 ...

  5. textarea定位光标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CentOS 6下安装nodejs 0.9.0(转)

    确保安装了python,大部分安装失败都是由于python版本过低导致.安装之前,升级python版本,升级步骤 http://www.tomtalk.net/wiki/Python. [root@S ...

  7. C#奇葩关键字

    C#奇葩关键字——忐忑 那就认识认识吧,可是又太多,所以也只能是想到哪里是哪里,我们这就让思绪自由飞翔一会吧! 1.@ 这个东东看似和邮件有关啊,但是在C#的世界里,可跟邮件没有一毛钱关系,它是str ...

  8. springMVC3学习(三)--handlerMapping和handlerAdapter

    基本结构和 springMVC3学习(一)--框架搭建 差不多,这里不再用Annotation注解的方式 以下只说明需要修改的部分: 1.在Spring配置文件中配置HandlerMapping.Ha ...

  9. 专为webkit内核而生的javascript库mango正式发布

    专为webkit内核而生的javascript库mango正式发布 Mango(芒果) javascript库 求fork https://github.com/willian12345/mango ...

  10. JS关闭当前页面的方法

    JS关闭当前页面的方法 一.不带任何提示关闭窗口的js代码 1 <a href="javascript:window.opener=null;window.open('','_self ...