使用Canvas fillText方法（） - HTML5，JavaScript的

我有一個插件，將基於使用的圖像填充文字如下：使用Canvas fillText方法（） - HTML5，JavaScript的

function draw() { 
     //grab font to use 
     var fFamily = $(".activeText a .fontType-cont").val(); 
     ctx.font = startFontSize + 'px ' + fFamily; 
     ctx.fillText(text, 10, 100); 

     ctx.globalCompositeOperation = 'source-in'; 
     ctx.drawImage(img, 10, 20, 500, 100); 
} 

var canvas = document.getElementById(current), 
ctx = canvas.getContext('2d'), 
img = document.createElement('img'); 
//draw it 
img.onload = draw; 

img.src = $(".activeGColor").find('img').attr('src');

什麼情況是，畫布將採取圖片，在顯示它畫布和文字變得更大時，您將其視爲文字填充。我的問題是，我怎樣才能做到這一點，所以它看起來沒有伸展或什麼？我有選擇嗎？

你有什麼想法？

來源

2013-07-23 David Biga

你是用css增加畫布的大小，因爲這通常不會很好 – aaronman

不，我不是。我只是留下空白，讓它使用的圖像使Canvas的大小。 –

我們需要看到這裏發生了什麼的例子。你的問題聽起來像是你正在進行某種動畫......這會將字體大小改變爲更大和更大的大小。默認情況下工作的方式是文本將按比例渲染。但是，如果你使用任何東西如ctx.scale（），你顯然可以拋棄它。同樣，如果你沒有清除你的畫布每一幀，你可能會得到更多的流血效果，你可能會描述爲拉伸。

來源

2013-07-24 18:29:01 ericjbasti

我不認爲我可以重製它：/在這裏，所以當使用.fillText將文本與圖像的圖像是在文本的背景，我怎麼可以讓文本看到圖像是從遠處填充它，所以它看起來不像它被拉伸？ –

這是否類似於你想要去的東西？ http://jsfiddle.net/bH4tw/ – ericjbasti

你注意到你的文字是如何填充紅色的，用圖片替換它，並且保持它的大小，以便它看起來伸展，有沒有辦法做到這一點？ –

使用Canvas fillText方法（） - HTML5，JavaScript的

回答

相關問題