html5 холст текст слайд позади ничего

Question

Я хочу, чтобы текст холста html5 скользил позади ничего, его эффект, когда текст появляется как выход за некоторым препятствием, но препятствие невидимо. Вот некоторые YouTube видео, показывающее, как сделать это после эффекта: https://www.youtube.com/watch?v=KIYMy7vLLRo

Я знаю, как скользят текст вдоль полотна, и одна идея у меня оказывает два полотна друг на друга, а сверху холст меньше и содержит текст, который изначально из холста и слайдов дюйма Но если есть способ сделать это только с одним холстом, что было бы здорово.

Answer 1

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); 

Все, что вам нужно сделать, это использовать клип прямоугольник, который, как маску для редактирования изображений.

Answer 2

Вы можете использовать обтравочный контур для маскировки части текста.

Сохраните существующий обтравочный контур, используя метод save(). Создайте форму/путь и создайте новый путь обрезки, используя метод clip(). Нарисуйте свой текст. Сохраните предыдущий путь обрезки, используя метод restore().

Например, предположим, что ваш холст 100 пикселей на 100 пикселей. Следующий текст будет выводиться только на левой стороне холста.

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