为什么要在服务端安装canvas？因为不是所有的客户端都能很好的支持canvas（比如微信小程序不能修改自定义字体），所以我们需要一个可以在服务端生成图片，然后把图片传过来安装node-canvas1.更新编译环境sudoapt-getinstalllibcairo2-devlibjpeg8-devlibpango1.0-devlibgif-devbuild-essentialg++-y2。安装节点画布npminstall-gcanvas3。测试代码varCanvas=require('canvas'),canvas=newCanvas(300,200),ctx=canvas.getContext('2d'),fs=require('fs');varout=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.fillStyle='#aaa'ctx.fillRect(50,30,50,50);//绘制文字ctx.fillStyle="#000";ctx.font="20pxArial";ctx.fillText("HelloWorld",0,20);//画圆ctx.beginPath();ctx.arc(30,110,20,0,2*Math.PI);ctx.stroke();ctx.fillStyle="green";ctx.fill();ctx.save();你可能遇到的问题如果你按照上面的方法操作，并且运行成功，那就太好了1.自定义字体//需要在创建Canvas之前调用Canvas.registerFont('comicsans.ttf',{family:'ComicSans'});varcanvas=newCanvas(500,500),ctx=canvas.getContext('2d');ctx.font='12px"ComicSans"';ctx.fillText(250,10,'人人都讨厌thisfont:(');但是，你可能会发现Canvas.registerFont不是一个函数，因为npm版本没有这个函数。所以你需要找到另一个github版本https://github.com/chearon/node-canvas#12971f64a66bgitclone下来然后把Canvas=require('canvas')改成require('./node-canvas'),willvarcanvas=newCanvas(300,200)改为varcanvas=newCanvas.Canvas(300,200)2.Error:Cannotfindmodule'../build/Release/canvas.node'如果遇到这个问题，请cd进入你的node-canvas目录并执行npminstall如果还是不行，请执行npminstall-gnode-gyp然后cd到项目目录执行node-gyprebuild，然后cd到node-canvas并执行node-gyprebuild如果成功，我的项目目录和示例代码将出现。├──1.html├──composer.json├──font├──fz.ttf├──img├──index.js├──node-canvas├──node_modules├──package.json└───package-lock.json我的代码varfs=require('fs'),path=require('path');varhttp=require('http'),url=require("url");varCanvas=require('./node-canvas'),Image=Canvas.Image;varFonts=[];varfilePath=路径。resolve('./font');letpromise=newPromise(function(resolve,reject){让i=0;fs.readdir(filePath,function(err,files){if(err){console.warn(err)}else{files.forEach(函数(filename){Canvas.registerFont(filePath+"/"+文件名,{family:"font"+i});控制台日志（一）；我++；});}});});promise.then(function(){console.log("ASDF");Fonts.forEach((Element)=>{console.log(Element);});});console.log('嗨！');http.createServer(function(req,res){varparams=url.parse(req.url,true).query;varstr=params.str+'\r',site=params.site;varrow=1,col=15,width=1500;row=str.length/15+1;varfontsize=width/col;varheight=fontsize*row+200;if(height<1000){height=1000}varcanvas=newCanvas.Canvas(宽度,高度),ctx=canvas.getContext('2d')res.writeHead(200,{"Content-Type":"image/png"});ctx.fillStyle='#FFF';ctx.fillRect(0,0,canvas.width,canvas.height);ctx.fillStyle='#000';if(row<2){letnum=str.lengthfontsize=1200/num;ctx.font=fontsize+'px"font'+site+'"';ctx.fillText(str,(width-num*fontsize)/2,(height-fontsize)/2-200+fontsize);}else{ctx.font=fontsize+'px"font'+site+'"';for(leti=0;i
