使用CSS3的@font-face嵌入字体后,怎样在HTML5中的CANVAS调用

 我来答
就烦条0o
2016-08-02 · 知道合伙人软件行家
就烦条0o
知道合伙人软件行家
采纳数:33315 获赞数:46492
从事多年系统运维,喜欢编写各种小程序和脚本。

向TA提问 私信TA
展开全部
<!doctype html>
 <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Automania";
      src: url("Automania.ttf");
    }
</style>
<script type="text/javascript">
function draw() {    
    var ctx = document.getElementById('shuipai').getContext('2d');    
    var img = new Image();    
    img.onload = function(){         
      ctx.drawImage(img,0,0);    
      ctx.beginPath();    
      ctx.fillStyle    = '#000';
      ctx.font         = "60px Automania";
      ctx.textBaseline = 'top';
      ctx.fillText('what this font looks', 0, 5);
      ctx.stroke();
    }
    img.src = 'http://dotnet.aspx.cc/Images/logoSite.gif';      
  }
</script>
<body>
 
<input onclick="draw()" type="button" value="test" />
<canvas id="shuipai" width="800" height="400"></canvas>
解语千遍
推荐于2018-05-17
知道答主
回答量:1
采纳率:0%
帮助的人:917
展开全部
经过测试需要在页面某处调用后,canvas调用才会有效。即页面上某处字体为该字体,然后canvas才能加载到这个字体。原因可能是canvas本质还是图片的属性,而浏览器假如加载dom元素假如未使用到某个自定义字体,为了加快页面加载速度,默认忽视了该字体的加载,导致canvas内部调用不到。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式