javascript - 检测画布文本 API 支持 (Opera Mini)

Question

尽管 Opera Mini 不显示画布文本，但典型的测试表明它具有文本 API 函数的实现。是否有替代技术来检查支持？

当前方法：

var context = document.createElement("canvas").getContext("2d");
var canvasTextSupport = typeof context.fillText == "function"; // true in Opera Mini

您可以使用一个示例来查看是否显示文本：tutorialspoint

Answer 1

正如@kangax 所建议的那样，您可以通过在画布上绘制文本然后确保已绘制像素来进行测试。

var canvasTextSupported = function() {
  var canvas = document.createElement("canvas");  
  var context = canvas.getContext("2d");

  context.fillText("X", 5, 5);     
  var imageData = context.getImageData(0, 0, 10, 10);

  for(var i = 0, l = imageData.data.length; i < l; i++) {
    if(imageData.data[i] !== 0)
      return true;
  }
  return false;
}

Answer 2

您可以使用 Modernizr 库的自定义构建来做到这一点！

http://modernizr.com/

Answer 3

当我canvas用来检测字体时，抛出错误，我发现一个更紧凑的替代方案是：

var canvasTextSupported = function() {
  var cvs = document.createElement("canvas");  
  var ctx = cvs.getContext("2d");
  return 'measureText' in ctx && ctx.measureText("") !== undefined;
}

Firefox 3.0.x 没有measureText. 在 Opera Mini measureText() 中返回undefined.

Answer 4

您可以使用canisuse.js脚本来检测您的浏览器是否支持画布文本 API

caniuse.canvasTextApi();