html5 canvas text slide in nothing

我想让html5 canvas文本在没有任何东西的背后滑动，它的效果是文字看起来像是出现在某个障碍物后面，但障碍物是看不见的。这里是展示如何做到这一点的影响后，一些YouTube视频： https://www.youtube.com/watch?v=KIYMy7vLLRo html5 canvas text slide in nothing

我知道如何相处的画布上的文字滑动，一个想法我正在对彼此顶部两个画布，和顶部帆布更小，并且包含最初出于画布并滑入的文本。但是，如果有一种方法可以使用一个很好的画布来完成。

来源

2015-11-06 pera

滑动文字时，可以在障碍物的区域上使用'ctx.clearRect（）'。 – 1cgonza

那也不清楚在文本下画布上画的其他东西吗？ – pera

是的，如果你的画布上已经有东西，那么'clearRect（）'将会删除它。我建议你在jsfiddle中构建一个简单的版本，并更新你的问题。如果我们能看到一些代码，你会在这里得到更好的帮助。 – 1cgonza

的jsfiddle：https://jsfiddle.net/CanvasCode/vgpov2yk/3

var c = document.getElementById('myCanvas'); 
var ctx = c.getContext("2d"); 

// Positions for the text startint off 
var xText = -100; 
var yText = 150; 

// This will update the canvas as fast as possible (not good) 
setInterval(function() { 
    // Clear the canvas 
    ctx.fillStyle = "#F0F"; 
    ctx.fillRect(0, 0, c.width, c.height); 

    ctx.save() 

    // We create a clip rect 
    ctx.rect(200,0,400,400); 
    ctx.clip(); 

    // Draw text 
    ctx.fillStyle = "#FFF"; 
    ctx.font = "30px Arial"; 
    ctx.fillText("Hello World", xText, yText); 

    ctx.restore(); 

    // Increase the text x position 
    if (xText < 200) { 
     xText += 0.5; 
    } 

}, 15);

所有你需要做的就是用剪辑矩形这就好比是在图像编辑口罩。

来源

2015-11-06 13:24:45 Canvas

谢谢，但模糊的矩形需要透明以使文字的效果从无处出现。你写了黑色的背景和黑色的遮蔽矩形。如果你在画布上有背景图像，那么它很复杂。 – pera

您可以使用剪切路径来掩盖部分文本。

使用save（）方法保存现有剪贴路径。使用clip（）方法创建一个形状/路径并使其成为新的剪切路径。画出你的文字。使用restore（）方法存储以前的剪贴路径。

例如，假设您的画布为100像素×100像素。以下内容将仅在画布的左侧绘制文字。

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

来源

2015-11-06 15:14:47

html5 canvas text slide in nothing

回答

相关问题