创建模仿绘图或手写文字的动画时,存在一些问题和答案。尽管我找到了canvas api示例和svg-based解决方案,但是使用Pixi.js的API却一无所获。我是 Canvas 和Pixi的新秀。
这是jsfiddle代码:
var ctx = document.querySelector("canvas").getContext("2d"),
dashLen = 220,
dashOffset = dashLen,
speed = 11,
txt = "Wingardium Leviosa",
x = 30,
i = 0;
ctx.font = "50px cursive, TSCu_Comic, sans-serif";
ctx.lineWidth = 5;
ctx.lineJoin = "round";
ctx.globalAlpha = 2 / 3;
ctx.strokeStyle = ctx.fillStyle = "black";
(function loop() {
ctx.clearRect(x, 0, 60, 150);
ctx.setLineDash([dashLen - dashOffset, dashOffset - speed]); // create a long dash mask
ctx.setLineDash([dashLen - dashOffset, dashOffset]); // create a long dash mask
dashOffset -= speed; // reduce dash length
ctx.strokeText(txt[i], x, 90); // stroke letter
if (dashOffset > 0) requestAnimationFrame(loop); // animate
else {
ctx.fillText(txt[i], x, 90); // fill final letter
dashOffset = dashLen; // prep next char
x += ctx.measureText(txt[i++]).width + ctx.lineWidth * Math.random();
ctx.setTransform(1, 0, 0, 1, 0, 3 * Math.random()); // random y-delta
ctx.rotate(Math.random() * 0.005); // random rotation
if (i < txt.length) {
setTimeout(() => {
requestAnimationFrame(loop);
}, 300 * Math.random())
};
}
})();
<canvas width=600></canvas>
据我了解,我上面喜欢的 Canvas 方法主要是通过pit中不存在的
setLineDash
创建绘制效果。我喜欢这种方法,只是不确定如何在Pixi中实现它。 最佳答案
我不了解Pixi,但是可行的解决方案可能是在示例中针对隐藏的 Canvas 使用例程,然后使用ctx.getImageData
可以获取结果,最后将获取的图像用作Pixi纹理。
另一种解决方案,也许更简单,但是只能在不需要其他Pixi效果时使用(例如,在游戏中,在游戏结束时或在两个级别之间),您可以停止Pixi渲染器并使用发布的代码直接对着皮溪 Canvas 。
希望这可以帮助。
关于javascript - 如何在Pixi.js中制作手绘文本动画?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/62335761/