如何使用 Kinetic JS 和 canvas 绘制看起来有浮雕效果的文本？

Question

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

我正在尝试用两种不同的阴影显示文本以创建 "embossed" 外观。我正在使用我想要得到的结果的 jsfiddle as a model，它使用 CSS。

这是我目前正在使用 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，我会说只需将最后一个文本图层的图层合成操作设置为“destination-out”，这将删除像素。

但是筛选他们的文档的工作量太大，所以这里没有任何框架也是一样的。

// 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.

如何使用 Kinetic JS 和 canvas 绘制看起来有浮雕效果的文本？

How can I draw text that looks embossed using Kinetic JS and canvas?

canvas

fabricjs

kineticjs

合成

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