使用HTML5的画布使用外部笔划绘制文本

Question

我目前正在使用HTML5的画布使用fillText方法渲染大量字符串.这很好,但我也想给每个字符串一个1px的黑色外笔画.不幸的是,strokeText函数似乎应用了内部笔划.为了解决这个问题,我编写了一个drawStrokedText函数来实现我所追求的效果.不幸的是它很慢(原因很明显).

是否有使用本机画布功能实现1px外部笔划的快速,跨浏览器方式？

drawStrokedText = function(context, text, x, y)
{
    context.fillStyle = "rgb(0,0,0)";
    context.fillText(text, x-1, y-1);
    context.fillText(text, x+1, y-1);
    context.fillText(text, x-1, y);
    context.fillText(text, x+1, y);
    context.fillText(text, x-1, y+1);
    context.fillText(text, x+1, y+1);

    context.fillStyle = "rgb(255,255,255)";
    context.fillText(text, x, y);
};

这是工作效果的一个例子:

Answer 1

中风怎么了？由于笔划的一半将在形状之外,因此您始终可以首先绘制笔划,线宽为所需的两倍.所以,如果你想要一个4px的外击,你可以这样做:

function drawStroked(text, x, y) {
    ctx.font = '80px Sans-serif';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 8;
    ctx.strokeText(text, x, y);
    ctx.fillStyle = 'white';
    ctx.fillText(text, x, y);
}


drawStroked("37°", 50, 150);

这使得:

在这里小提琴:http://jsfiddle.net/vNWn6/

如果在较小的文本呈现比例下看起来不那么准确,您可以随时将其绘制得很大但是缩小它(在上面的例子中你会做ctx.scale(0.25, 0.25))

Answer 2

Simon的答案是一个很好的解决方案,但在某些情况下它可能会出现故障,特别是在资本'M','V'和'W'的情况下:

drawStroked("MVW", 50, 150);

http://jsfiddle.net/hwG42/1/

在这种情况下,最好利用:

ctx.miterLimit=2;

http://jsfiddle.net/hwG42/3/

祝你好运!

Answer 3

上面的答案很棒，使用其中一些解决方案*和我自己的一些想法，我在下面的小提琴中做了快速参考和一些创造性的替代方案。

*所有学分均在小提琴代码中给出

drawStrokedText   ( text, x, y );
drawShadowedText  ( text, x, y, shadowBlur);
drawGlowingText   ( text, x, y, glowColorHex, glowDistance);
drawBlurredText   ( text, x, y, blurAmount);
drawReflectedText ( text, x, y, reflectionScale, reflectionOpacity);

https://jsfiddle.net/vtmnyea8/

drawStrokedText   ( text, x, y );
drawShadowedText  ( text, x, y, shadowBlur);
drawGlowingText   ( text, x, y, glowColorHex, glowDistance);
drawBlurredText   ( text, x, y, blurAmount);
drawReflectedText ( text, x, y, reflectionScale, reflectionOpacity);

// Author: Aaron Edmistone
// Text effects using HTML5 Canvas with 2D Context.
// https://stackoverflow.com/questions/7814398/a-glow-effect-on-html5-canvas

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// prepare the presentation of the canvas
ctx.fillStyle = 'black';
ctx.fillRect(0,0,250,450);
ctx.fillStyle = 'gray';
ctx.fillRect(250,0,250,450);
ctx.fillStyle = 'white';
ctx.fillRect(500,0,250,450);
ctx.fillStyle = '#0066CC';
ctx.fillRect(750,0,250,450);

// prepare the font and fill
ctx.font = "80px Sans-serif";
ctx.fillStyle = "white";

function drawStrokedText(text, x, y)
{
        // using the solutions from @Simon Sarris and @Jackalope from
    // https://stackoverflow.com/questions/7814398/a-glow-effect-on-html5-canvas
        ctx.save();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 8;
    ctx.lineJoin="round";
      ctx.miterLimit=2;
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);
    ctx.restore();
}

function drawShadowedText(text, x, y, shadowBlur = 3)
{
        ctx.save();
    ctx.shadowBlur = shadowBlur;
    ctx.shadowColor = "#000000";
    ctx.shadowOffsetX = 4;
    ctx.shadowOffsetY = 4;
    ctx.fillText(text, x, y);
    ctx.restore();
}

function drawGlowingText(text, x, y, glowColorHexString, glowDistance = 10)
{
        ctx.save();
    ctx.shadowBlur = glowDistance;
    ctx.shadowColor = glowColorHexString;
    ctx.strokeText(text, x, y);
    
    for(let i = 0; i < 3; i++)
        ctx.fillText(text, x, y); //seems to be washed out without 3 fills
      
    ctx.restore();
}

function drawBlurredText(text, x, y, blur = 5)
{
    //using technique from https://www.html5rocks.com/en/tutorials/canvas/texteffects/
    ctx.save();
  let width = ctx.measureText(text).width + blur * 2;
  ctx.shadowColor = ctx.fillStyle;
  ctx.shadowOffsetX = width + x + ctx.canvas.width;
  ctx.shadowOffsetY = 0;
  ctx.shadowBlur = blur;
  ctx.fillText(text, -width + -ctx.canvas.width, y);
  ctx.restore();
}

function drawReflectedText(text, x, y, reflectionScale = 0.2, reflectionAlpha = 0.10)
{
    ctx.save();
  ctx.fillText(text, x, y);
    ctx.scale(1, -reflectionScale);
  ctx.globalAlpha = reflectionAlpha;
  ctx.shadowColor = ctx.fillStyle;
  ctx.shadowBlur = 15;
    ctx.fillText(text, x, -(y * (1 / reflectionScale)));
  ctx.restore();
}

for(let i = 0; i < 4; i++)
{
    drawStrokedText     ("MVW", 20 + i * 250, 80 * 1);
    drawShadowedText    ("MVW", 20 + i * 250, 80 * 2, 3);
  drawGlowingText       ("MVW", 20 + i * 250, 80 * 3, "#FF0000", 10);
  drawBlurredText       ("MVW", 20 + i * 250, 80 * 4, 5);
  drawReflectedText ("MVW", 20 + i * 250, 80 * 5, 0.5, 0.5);
}

小提琴的输出：

它支持什么：

• 大纲文本
• 阴影文字
• 发光文字
• 文字模糊
• 反射文字

一些性能指标：

考虑在游戏中或高帧速率下使用它？使用上述方法查看这个jsperf 。

https://jsperf.com/various-text-effects-html5-2d-context

Answer 4

对于平滑的阴影，你可以试试这个

ctx.beginPath();
ctx.fillStyle = 'white';
ctx.font = "bold 9pt Tahoma";
ctx.shadowBlur = 3;
ctx.textAlign = "center";
ctx.shadowColor = "#000000";
ctx.shadowOffs = 0;                 
ctx.fillText('www.ifnotpics.com', 100, 50);        
ctx.closePath();