Question

在CSS中，我可以在text-shadow属性中链接多个定义以实现诸如发光之类的效果：

＆＃13;

.green-glow {
    padding:20px 40px 40px;
    font-family:'Georgia';
    font-size:70px;
    background-color:#000;
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0f0, 0 0 70px #0f0, 0 0 80px #0f0, 0 0 100px #0f0, 0 0 150px #0f0;
}

＆＃13;

<div class="green-glow">glow</div>

＆＃13;

我想使用CanvasRenderingContext2D.fillText在canvas元素上绘制文本时实现类似的效果，但是因为阴影定义分为多个属性（shadowBlur，shadowColor等），所以对于我来说，链接多个阴影的方法并不是很明显。

我可以对CanvasRenderingContext2D.fillText进行多次调用，每个定义的阴影都有一个，如下面的代码段所示......

＆＃13;

// get context
var ctx = document.querySelector('#test').getContext('2d');

// clear background to black
ctx.fillStyle = '#000'
ctx.fillRect(0, 0, 500, 150);

// common font attributes
ctx.font = "70px Georgia";
ctx.fillStyle = 'white';

// apply multiple shadows

ctx.shadowColor = '#fff';
ctx.shadowBlur = 10;
ctx.fillText('glow', 50, 90);

ctx.shadowBlur = 20;
ctx.fillText('glow', 50, 90);

ctx.shadowBlur = 30;
ctx.fillText('glow', 50, 90);

ctx.shadowColor = '#0f0';
ctx.shadowBlur = 40;
ctx.fillText('glow', 50, 90);

ctx.shadowBlur = 70;
ctx.fillText('glow', 50, 90);

ctx.shadowBlur = 80;
ctx.fillText('glow', 50, 90);

ctx.shadowBlur = 100;
ctx.fillText('glow', 50, 90);

ctx.shadowBlur = 150;
ctx.fillText('glow', 50, 90);

＆＃13;

canvas {
    width: 500px;
    height: 150px;
}

＆＃13;

<canvas id="test" width="500" height="150"></canvas>

＆＃13;

......虽然它对我来说看起来并不相同，但对我的目的来说这已经足够了。但我想知道这些对fillText的多次调用可能导致的性能问题以及是否有更合适的方法在画布上应用多个文本阴影。

谢谢！

在2d画布中的多个文本阴影

0 个答案: