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

回答

相關問題