美文网首页
canvas中使用特殊字体

canvas中使用特殊字体

作者: 云桃桃 | 来源:发表于2018-11-21 11:25 被阅读13次

    其实很简单,和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中使用特殊字体

          本文链接:https://www.haomeiwen.com/subject/bxiqqqtx.html