Question

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

我试图用两个不同的阴影来显示文字以创建一个＆＃34;浮雕＆＃34;看。我使用了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

合成

使用“目的地输出”删除像素。

如果我知道如何使用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.

如何使用Kinetic JS和canvas绘制看起来压花的文本？

1 个答案:

合成

使用“目的地输出”删除像素。