如何绘制使用Kinetic JS和画布浮雕的文本？

本文介绍了如何绘制使用Kinetic JS和画布浮雕的文本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 更新-这是我使用Kinetic的最终 带有所有3个文本对象... 我的下一个想法是创建主文本的剪贴蒙版，以从两个阴影中减去该阴影，然后用不透明性绘制主要文本，以产生背景色。但是我不确定如何执行此操作，或者是否有更好的方法。解决方案 合成 使用 destination-out 如果我知道如何使用dynamicjs，可以说只需将最后一个文本层的层复合操作设置为 destination-out即可。 但是筛选文档的工作量很大，因此这里是没有任何框架的事情。 //常量 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 //创建画布添加样式并放在页面上 const canvas = document.createElement（ canvas）; const w =（canvas.width = innerWidth-24）/ 2; //设置大小并获取中心 const h =（canvas.height = innerHeight-24）/ 2; canvas.style.background =背景; canvas.style.border =边框； const ctx = canvas.getContext（ 2d）; document.body.appendChild（canvas）; //设置字体和字体渲染对齐方式 ctx.font = font; ctx.textAlign =中心; ctx.textBaseline =中间; //绘制深色阴影 ctx.shadowBlur =模糊； // shadow ctx.fillStyle = ctx.shadowColor = shadow; ctx.shadowOffsetY = ctx.shadowOffsetX =模糊； ctx.fillText（text，w，h）; //绘制highLight ctx.fillStyle = ctx.shadowColor = highLight; ctx.shadowOffsetY = ctx.shadowOffsetX =-模糊; ctx.fillText（text，w，h）; //绘制可删除像素的中心文本 ctx.shadowColor = rgba（0,0,0,0.0）; //关闭阴影 ctx.fillStyle = black; ctx.globalCompositeOperation =目的地出; //新像素将删除旧像素，使它们透明化 ctx.fillText（text，w，h）; ctx.globalCompositeOperation =源于； //恢复默认的复合操作。 Update - Here is my final jsfiddle working version using Kinetic.I'm trying to show text with two different shadows to create an "embossed" look. I'm using this jsfiddle as a model of the result I'd like to get which uses CSS. Here is the jsfiddle of what I'm working on currently with Kinetic JS.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();I am currently drawing the text 3 times and just offsetting them to get each shadow and then the main text. My issue is that the main text needs to have opacity to bring forth the background color. Here are a few screenshots to see what I'm up against.Just the shadows...With all 3 text objects...My next thought was to create a clipping mask of the main text to subtract that out of the two shadows, then draw the main text with opacity to bring forth the background color. But I'm not exactly sure how to do that or if there's a better way. 解决方案 CompositingUse "destination-out" to remove pixels.If I knew how to use kineticjs I would say just set the layer composite operation for the last text layer to "destination-out" and that will remove the pixels.But too much work to sift their documentation so here is the same thing without any frameworks.// constantsconst 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 pageconst canvas = document.createElement("canvas");const w = (canvas.width = innerWidth - 24) / 2; // set size and get centersconst 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 alignmentctx.font = font; ctx.textAlign = "center";ctx.textBaseline = "middle";// draw dark shadowctx.shadowBlur = blur; // shadowctx.fillStyle = ctx.shadowColor = shadow;ctx.shadowOffsetY = ctx.shadowOffsetX = blur;ctx.fillText(text, w, h);// draw highLightctx.fillStyle = ctx.shadowColor = highLight;ctx.shadowOffsetY = ctx.shadowOffsetX = -blur;ctx.fillText(text, w, h);// draw center text that removes pixelsctx.shadowColor = "rgba(0,0,0,0.0)"; // turn off shadowctx.fillStyle = "black";ctx.globalCompositeOperation = "destination-out"; // New pixels will remove old pixels making them transparentctx.fillText(text, w, h);ctx.globalCompositeOperation = "source-over"; // restore default composite operation. 这篇关于如何绘制使用Kinetic JS和画布浮雕的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！