경로에 텍스트 추가

HTML5 CanvasRenderingContext2D에서 현재 경로에 텍스트를 추가 할 수 있습니까? 예 : 클리핑을 위해서?경로에 텍스트 추가

// rectangle clip 
context.beginPath(); 
context.rect(0,0,100,100); 
context.clip(); 

// clip to text 
context.beginPath(); 
context.text("HELLO WORLD", 0, 20); // this function does not exist 
context.clip();

출처

2014-03-13 Bart van Heukelom

은 가능한 현재 경로, 예를 들어, 텍스트를 추가하는 것입니다 클리핑을 위해서?

단순한 대답은 없습니다. 텍스트 경로는 캔버스 컨텍스트를 통해 우리에게 노출되지 않으므로 클리핑과 같은 용도로 사용할 수 없습니다. 에 "펀치"텍스트의 구멍

사용 복합 모드 :

있는 유일한 방법은에 중 하나입니다. 클리핑과 같은 방식으로 많은 작업을하지만 패스 이외의 매트와 관련이 있습니다.
글꼴의 텍스트 경로를 수동으로 다각형으로 추출하고 선, 베 지어 등을 사용하여 글꼴 경로를 추출하는 데 도움이되는 라이브러리는 opentype.js이 될 수 있습니다.

출처

2014-03-13 19:58:24 K3N

넌 = "소스의"exsiting 텍스트 새로운 형상이 겹치는 경우에만 새로운 그림을 그리는 것 텍스트 (효과적으로 텍스트 내부로 패스)

context.globalCompositeOperation로 그려 합성을 사용하여 (중첩되지 않는 영역은 투명하게 만들어집니다). 당신이 텍스트 주위에 사각형을 넣어하려는 경우 http://jsfiddle.net/m1erickson/yWuw7/

enter image description here

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=start; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg"; 
    function start(){ 

     canvas.width=img.width; 
     canvas.height=img.height; 

     ctx.font="138 verdana"; 
     ctx.fillText("See the",20,150); 
     ctx.fillText("Sea",20,300); 
     ctx.globalCompositeOperation="source-in"; 
     ctx.drawImage(img,0,0); 

    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <h4>Water image clipped to text using Compositing.</h4> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

, 당신은 다음 다른 복합 ("대상 오버")을 사용할 수 있습니다 :

다음 예제 코드와 데모입니다 당신은 기존의 픽셀에서 새로운 모양을 그릴

ctx.globalCompositeOperation="destination-over"; 
ctx.fillRect(15,20,275,150);

,113,210

[추가 : 기존 배경 클립 텍스트 적용] 당신이 배경을 유지하려면

하면, 당신은 쉽게 오프 스크린 캔버스를 만들고이 일시적으로 캔버스에 텍스트 복합의 drawImage을 할 수 있습니다. drawImage를 사용하여 보이는 캔버스에 임시 캔버스를 그립니다. 그렇게하면 기존의 배경을 유지하고 잘린 텍스트를 얻을 수 있습니다.

데모 : http://jsfiddle.net/m1erickson/n7x8y/

enter image description here

출처

2014-03-13 16:38:57 markE

가끔은 유용 할 수 있지만, 틀렸을 경우 수정하십시오. 캔버스에 이미 픽셀 (배경)이있는 경우 작동하지 않습니다. –

예, 기존 픽셀은 합성 작업의 영향을받습니다. 배경을 유지하려는 경우 쉽게 오프 스크린 캔버스를 만들고 해당 임시 캔버스에 text-composite-drawImage를 수행 할 수 있습니다. drawImage (offscreenCanvas, x, y)를 사용하여 보이는 캔버스에 임시 캔버스를 그립니다. 그렇게하면 기존의 배경을 유지하고 잘린 텍스트를 얻을 수 있습니다. 프로젝트에 행운을 빌어 요! – markE

경로에 텍스트 추가

답변

관련 문제