node-canvas
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的更多相关文章
- silverlight 控件自定义样式 实现方法
1:在app.xaml中加入需实现的样式,如: <Application.Resources> <Style x:Key="NodeStyle" TargetTy ...
- unity assetStore 常用插件
常用插件 20180723============= 教程类 =============<Mecanim Example Scenes > 官方示例场景<Surivial Shoot ...
- web实时长图实践--摘抄
背景简介 全民K歌专辑发布新玩法,传统宣传专辑战绩的流程,从获取数据,到制作海报,到传播,周期长运营成本高,如何快速分享战绩进行荣誉感的传播成为一个亟待解决的问题. 产品:能不能在专辑大事件触发时,自 ...
- cc.Component
组件入口函数1: onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点,以及节点关联的资源数据;2: start: 也就是第一次执行 update 之前触发;3: update(d ...
- babeljs源码
babel.min.js!function(e,t){"object"==typeof exports&&"object"==typeof mo ...
- Node.js:进程、子进程与cluster多核处理模块
1.process对象 process对象就是处理与进程相关信息的全局对象,不需要require引用,且是EventEmitter的实例. 获取进程信息 process对象提供了很多的API来获取当前 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- Node学习笔记(三):基于socket.io web版你画我猜(二)
上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...
- Node学习笔记(三):基于socket.io web版你画我猜(一)
经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...
- canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
随机推荐
- twobin博客样式
twobin博客样式—“蓝白之风” 自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔.一个设计清爽美观的网页能让读者心旷神怡,甚至没有 ...
- JavaScript学习--(智能社视频)
JavaScript学习,这是智能社官网上的JS视频,讲解的挺不错的,就是没有视频的demo,在视频中附上自己编写的一些demo... 下载地址:http://pan.baidu.com/s/1cPz ...
- Controller 和 Action (2)
Controller 和 Action (2) 继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Inv ...
- 【Bootstrap】Bootstrap Datepicker使用
插件:http://url.cn/V4S8w4 1.添加样式和引用JS文件 <link href="CSS/bootstrap-datetimepicker.css" rel ...
- [转]ARM/Thumb2PortingHowto
src: https://wiki.edubuntu.org/ARM/Thumb2PortingHowto#ARM_Assembler_Overview When you see some assem ...
- 一,IL访问静态属性和字段
一,IL访问静态属性和字段 IL介绍 通用中间语言(Common Intermediate Language,简称CIL,发音为"sill"或"kill")是一 ...
- 12、Python-网络编程
1.套接字1.1 socket模块套接字是网络编程中的一个基本组件,一般包括服务器端套接字和客户端套接字. 创建服务器端过程如下: import socket s = socket.socket() ...
- SQL Server 2014新特性:五个关键点带你了解Excel下的Data Explorer
SQL Server 2014新特性:五个关键点带你了解Excel下的Data Explorer Data Explorer是即将发布的SQL Server 2014里的一个新特性,借助这个特性讲使企 ...
- hdu1205(类似 分布垃圾数列)
Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...
- 方法控件[置顶] Asp.net总结(一)
本文朋友在青岛逛街的时候突然想到的...这两天就有想写几篇关于方法控件的博客,所以回家到之后就奋笔疾书的写出来发表了 纵观 Asp.net的学习只会之路,可以发现 Asp.net可以分为以下几大块 控 ...