其实很简单，和css处理方式几乎一样。
- css
@font-face {
font-family: "ripple";
src:url('font/brush.ttf') format("truetype");
}
- js
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fill();
ctx.font='';
ctx.fillStyle='#0ff';
// 主要在这里定义 这个名字 就是上面css里面定义的font名字
ctx.font='50px mn';
ctx.fillText('hello',canvas.width/2,canvas.height/2);