canvas中使用特殊字体

2018-11-21  本文已影响13人  云桃桃

其实很简单,和css处理方式几乎一样。

  @font-face {
            font-family: "ripple";
            src:url('font/brush.ttf') format("truetype");
        }

    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);

上一篇 下一篇

猜你喜欢

热点阅读