사용하여 캔버스 fillText() - HTML5, 자바 스크립트

내가 사용하여 이미지를 기반으로 텍스트를 입력하는 플러그인을 가지고 다음과 같은 : 무엇을 어떻게하면 캔버스, 해당 이미지를 취하는에 표시하는 것입니다사용하여 캔버스 fillText() - HTML5, 자바 스크립트

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

텍스트가 빨간색으로 채워지는 것을 보았을 때 텍스트로 교체하고 이미지로 바꾸고 이미지에서 크기를 유지하므로 이미지가 뻗어있는 것처럼 보입니다. 그렇게 할 수있는 방법이 있습니까? –

사용하여 캔버스 fillText() - HTML5, 자바 스크립트

답변

관련 문제