是否可以用HTML5 Canvas Text API绘制文本装饰（下划线等）？ [英] is it possible to draw text decoration (underline, etc.) with HTML5 Canvas Text API?

问题描述

我使用HTML5 canvas API显示一些字符串（canvas.fillText），我想知道文本装饰（如下划线，删除线等）是否可能与canvas api。不幸的是我没有发现这一点。我发现的唯一的解决方案是手动做装饰使用画布绘图api（我的意思是，明确绘制水平线，例如，模仿下划线装饰）。
是使用canvas文本api可能吗？

I am using the HTML5 canvas API to display some string (canvas.fillText), and I was wondering whether text decoration (like underline, strikethrough, etc.) was something possible with the canvas api. Unfortunately I found nothing about this. The only solution I found was to manually do the decoration using the canvas drawing api (I mean, explicitly drawing a horizontal line for example, to mimic the 'underline' decoration). Is it something possible using the canvas text api ?

感谢
Patrick

Thanks Patrick

推荐答案

使用内置的方法，但这里是一个简化的功能我使用成功基于阅读这个。 http://scriptstock.wordpress.com/2012/ 06/12 / html5-canvas-text-underline-workaround /

It won't work with a built-in method, but here is a simplified function I used successfully based on reading this. http://scriptstock.wordpress.com/2012/06/12/html5-canvas-text-underline-workaround/

var underline = function(ctx, text, x, y, size, color, thickness ,offset){
  var width = ctx.measureText(text).width;

  switch(ctx.textAlign){
    case "center":
    x -= (width/2); break;
    case "right":
    x -= width; break;
  }

  y += size+offset;

  ctx.beginPath();
  ctx.strokeStyle = color;
  ctx.lineWidth = thickness;
  ctx.moveTo(x,y);
  ctx.lineTo(x+width,y);
  ctx.stroke();

}

这篇关于是否可以用HTML5 Canvas Text API绘制文本装饰（下划线等）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！