html5画布文本滑入空白处

我想让html5画布上的文本在没有任何东西的情况下滑入，它的效果是文本看起来像是从某个障碍物后面出来的，但障碍物是看不见的。 以下是一些youtube视频，展示了如何在“后效”中执行此操作：

我知道如何在画布上滑动文本，我得到的一个想法是将两个画布放在彼此的顶部，顶部画布更小，包含最初从画布中滑出并滑入的文本。但是如果有一种方法可以只用一块画布就可以了，那就太好了。

jsiddle:

var c=document.getElementById（'myCanvas'）；
var ctx=c.getContext（“2d”）；
//文本起始色调关闭的位置
var xText=-100；
var-yText=150；
//这将尽可能快地更新画布（不好）
setInterval（函数（）{
//清理画布
ctx.fillStyle=“#F0F”；
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.save（）
//我们创建一个clip rect
ctx.rect（200,0400）；
ctx.clip（）；
//绘制文本
ctx.fillStyle=“#FFF”；
ctx.font=“30px Arial”；
fillText（“你好，世界”，xText，yText）；
ctx.restore（）；
//增加文本的x位置
if（xText<200）{
xText+=0.5；
}
}, 15);

您所要做的就是使用一个clip rect，它类似于图像编辑中的掩码。

jsiddle:

var c=document.getElementById（'myCanvas'）；
var ctx=c.getContext（“2d”）；
//文本起始色调关闭的位置
var xText=-100；
var-yText=150；
//这将尽可能快地更新画布（不好）
setInterval（函数（）{
//清理画布
ctx.fillStyle=“#F0F”；
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.save（）
//我们创建一个clip rect
ctx.rect（200,0400）；
ctx.clip（）；
//绘制文本
ctx.fillStyle=“#FFF”；
ctx.font=“30px Arial”；
fillText（“你好，世界”，xText，yText）；
ctx.restore（）；
//增加文本的x位置
if（xText<200）{
xText+=0.5；
}
}, 15);

---

你所要做的就是使用一个clip-rect，它就像图像编辑中的掩码一样。

你可以使用一个剪切路径来屏蔽部分文本

使用Save（）方法保存现有剪辑路径。创建一个形状/路径，并使用clip（）方法使其成为新的剪裁路径。画出你的文字。使用restore（）方法存储上一个剪辑路径

例如，假设画布是100像素乘以100像素。以下内容将仅在画布的左侧绘制文本

context.save();
context.rect(0, 0, 50, 100);
context.clip();
context.fillText("Draw some text.", 30, 50);
context.restore();

---

可以使用剪切路径遮罩部分文本

使用Save（）方法保存现有剪辑路径。创建一个形状/路径，并使用clip（）方法使其成为新的剪裁路径。画出你的文字。使用restore（）方法存储上一个剪辑路径

例如，假设画布是100像素乘以100像素。以下内容将仅在画布的左侧绘制文本

context.save();
context.rect(0, 0, 50, 100);
context.clip();
context.fillText("Draw some text.", 30, 50);
context.restore();

---

滑动文本时，您可以使用

ctx.clearRect（）

越过障碍物区域。这不也会清除文本下方画布上绘制的其他内容吗？是的，如果画布上已有内容，则

clearRect（）

会将其删除。我建议您构建一个简单的JSFIDLE版本，并更新您的问题。如果我们能看到一些代码，您将在这里得到更好的帮助。在滑动文本时，您可以使用

ctx.clearRect（）

越过障碍区域。这不也会清除在文本下方画布上绘制的其他内容吗？是的，如果您的画布上已经有一些内容，那么

clearRect（）

将删除它。我建议您构建一个简单的JSFIDLE版本，并更新您的问题。若我们能看到一些代码，你们会在这里得到更好的帮助。谢谢，但模糊的矩形必须是透明的，这样文本的效果才会出现。您编写了黑色背景和黑色模糊矩形。若你们在画布上有背景图像，那个么它是复杂的。谢谢，但模糊的矩形需要是透明的，以使文本的效果不知从何处出现。您编写了黑色背景和黑色模糊矩形。如果画布上有背景图像，那么它就很复杂。