我如何“写”上下文画布中的图标？ [英] How i "write" an icon in the context canvas?

问题描述

这是我的类型字体：
@ font-face {font-family：myicon; /*...*/}

css中我的图标的内容是：
content：\e000;

我的Js代码：
ctx.font = '13 .5pt myicon';
ctx.fillText（\\\，90，101）; // not working


你能解释一下我的问题在哪里？为什么不打印图标？
（对不起，我的英语不好）

解决方案

虽然你可以使用脚本如一个markE提及，

脚本将通过执行以下操作进行测试：

• 创建内部画布，为其绘制默认字体并存储其像素


• 尝试设置所需的字体，绘制并提取其像素
如果像素级别没有区别，请稍等

• 在第一个像素差异，我们加载了一个新的字体>
  
• 如果超时（此处为3秒），它将调用错误回调

：

  hasFont（Open Sans，function（）{document.body.innerHTML + =OK< br&字体...//未知字体：hasFont（xFontoY，function（）{document.body.innerHTML + =OK}，function（）{document.body.innerHTML + =Not loaded}）; }，function（）{document.body.innerHTML + =Not loaded}）; function hasFont（fontName，callback，error）{var canvas = document.createElement（canvas），ctx = canvas.getContext ），w = 60，h = 20，//影响精确度延迟= 50，maxTests =（1000 / delay）* 3，// 3 sec @ 50ms intervals initial = getPixels（sans-serif）; canvas.width = w; canvas.height = h; // test（function test（）{var px = getPixels（fontName），len = px.length，i = 0; for（; i  

  @ font-face {font-family：开放Sans'; font-style：normal; font-weight：400; font-weight： src：local（'Open Sans'），local（'OpenSans'），url（https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2）format（'woff2'），url（https： //fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff）format（'woff'）;} canvas {border：1px solid＃000}  

div>

随意重写它以接受选项，承诺等。

This is my type font:
@font-face {font-family: "myicon";/*...*/}
And the content for my icon in css is:
content: "\e000";
My Js code:
ctx.font = '13.5pt myicon'; ctx.fillText("\ue000",90, 101); //not working

can you explain me where is the problem ? why not print the icon ? (Sorry for my bad english)

解决方案

Although you can use script such as the one markE mentions, you can also just paste in a small snippet that waits for the font to load.

The script will test by doing:

• Create an internal canvas, draw default font to it and store its pixels
• Try to set the font you want at intervals, draw it and extract its pixels
• If there is no difference at pixel level, wait more
• At first pixel difference, we have a new font loaded (presumably)
• If timed out (here 3 sec) it will call error callback

A live example:

hasFont("Open Sans", function() {
  document.body.innerHTML += " OK<br>Loading font..."

  // unknown font:
  hasFont("xFontoY", function() {
    document.body.innerHTML += " OK"
  }, function() {
    document.body.innerHTML += " Not loaded"
  });
  
}, function() {
  document.body.innerHTML += " Not loaded"
});

function hasFont(fontName, callback, error) {

  var canvas = document.createElement("canvas"),
      ctx = canvas.getContext("2d"),
      w = 60, h = 20,                             // affects accuracy
      delay = 50, maxTests = (1000 / delay) * 3,  // 3 sec @ 50ms intervals
      initial = getPixels("sans-serif");
  
  canvas.width = w; canvas.height = h;

  // test
  (function test() {
    var px = getPixels(fontName), len = px.length, i = 0;
    for(; i < len; i++) {
      if (initial[i] !== px[i]) {callback(fontName);return}
    }
    
    if (--maxTests) setTimeout(test, delay);
    else {if (error) error(fontName)}
  })();
  
  function getPixels(fontName) {
    ctx.clearRect(0, 0, w, h);
    ctx.font = h + "px " + fontName + ", sans-serif";
    ctx.fillText("aWm", 0, h);
    return new Uint32Array(ctx.getImageData(0, 0, w, h).data.buffer);
  }
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
canvas {border:1px solid #000}

Loading font...

Feel free to rewrite it to take options, promise etc.

这篇关于我如何“写”上下文画布中的图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！