canvas中使用特殊字体

其实很简单,和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);

你可能感兴趣的:(canvas中使用特殊字体)