如何绘制使用Kinetic JS和画布看起来浮雕的文字？

Question

更新 - 这是我使用动力学的最终jsfiddle工作版本。

我试图用两种不同的阴影显示文字来创建“浮雕”外观。我正在使用我想要得到的使用CSS的结果的jsfiddle as a model。

这里是我正在与Kinetic JS工作的jsfiddle。

var stage = new Kinetic.Stage({ 
    container: 'stage-container', 
    width: 400, 
    height: 200 
}); 

var layer = new Kinetic.Layer(); 
stage.add(layer); 

var darkShadow = new Kinetic.Text({ 
     text: 'Hello', 
    x: 140, 
    y: 80, 
    fill: '#000000', 
    fontSize: 60, 
    opacity: 0.8, 
    filter: Kinetic.Filters.Blur, 
    filterRadius: 1 
});       

layer.add(darkShadow); 

var lightShadow = new Kinetic.Text({ 
     text: 'Hello', 
    x: 136, 
    y: 76, 
    fill: '#FFFFFF', 
    fontSize: 60, 
    opacity: 0.3, 
    filter: Kinetic.Filters.Blur, 
    filterRadius: 1 
});       

layer.add(lightShadow); 

var mainText = new Kinetic.Text({ 
     text: 'Hello', 
    x: 138, 
    y: 78, 
    fill: '#FFFFFF', 
    fontSize: 60, 
    opacity: 0.8 
});       

layer.add(mainText); 

layer.draw(); 

我目前正在绘制文本3次，只是抵消他们获得每个阴影，然后正文。我的问题是，主文本需要不透明才能显示背景颜色。这里有一些截图，看看我对抗什么。

只是阴影...

与所有3文本对象...

我的下一个想法是创建主文本的剪贴蒙版从两个阴影中减去该阴影，然后用不透明度绘制主文本以产生背景颜色。但我不确定如何去做，或者如果有更好的方法。

Answer 1

合成

使用“destination-out”删除像素。

如果我知道如何使用kineticjs，我会说只是将最后一个文本图层的图层合成操作设置为“目标输出”，这将删除像素。

但是过多的工作来筛选他们的文档，所以这里没有任何框架是同样的事情。

// constants 
 
const text = "Compositing"; 
 
const blur = 2; 
 
const highLight = "rgba(100,190,256,0.75)"; 
 
const shadow = "rgba(0,0,0,0.65)"; 
 
const font = "84px arial black"; 
 
const background = "linear-gradient(to right, #1e5799 0%,#3096e5 100%)"; 
 
const border = "2px solid #6CF" 
 

 
// create canvas add styles and put on page 
 
const canvas = document.createElement("canvas"); 
 
const w = (canvas.width = innerWidth - 24)/2; // set size and get centers 
 
const h = (canvas.height = innerHeight - 24)/2; 
 
canvas.style.background = background; 
 
canvas.style.border = border; 
 
const ctx = canvas.getContext("2d"); 
 
document.body.appendChild(canvas); 
 

 
// set up font and font rendering alignment 
 
ctx.font = font;    
 
ctx.textAlign = "center"; 
 
ctx.textBaseline = "middle"; 
 

 
// draw dark shadow 
 
ctx.shadowBlur = blur; // shadow 
 
ctx.fillStyle = ctx.shadowColor = shadow; 
 
ctx.shadowOffsetY = ctx.shadowOffsetX = blur; 
 
ctx.fillText(text, w, h); 
 

 
// draw highLight 
 
ctx.fillStyle = ctx.shadowColor = highLight; 
 
ctx.shadowOffsetY = ctx.shadowOffsetX = -blur; 
 
ctx.fillText(text, w, h); 
 

 
// draw center text that removes pixels 
 
ctx.shadowColor = "rgba(0,0,0,0.0)";    // turn off shadow 
 
ctx.fillStyle = "black"; 
 
ctx.globalCompositeOperation = "destination-out"; // New pixels will remove old pixels making them transparent 
 
ctx.fillText(text, w, h); 
 
ctx.globalCompositeOperation = "source-over";  // restore default composite operation.