Wie schneidet man einen Teil eines Textes in HTML5-Canvas ab?

Ich habe einen Text, der auf einem HTML5-Canvas gezeichnet wird. Wie kann ich einen Teil des Textes, der sich links von einer Linie befindet, ausschneiden oder ausblenden?Wie schneidet man einen Teil eines Textes in HTML5-Canvas ab?

In diesem Beispiel wird der Teil des Wortes "HELLO" links von der roten Linie abgeschnitten.

Es gibt zwei Einschränkungen:

Alles ist auf der gleichen Leinwand gezogen werden. Keine neuen Bilder erstellt werden
Die rote Linie in meiner realen Arbeit ist die y-Achse eines Diagramms. Auf der linken Seite der roten Linie befinden sich die Beschriftungen für die Achse. Stellen Sie sich also vor, dass auf dieser Seite Dinge gezeichnet sind, die sie zeigen müssen. Dieser Teil kann nicht blockiert oder gelöscht werden.

enter image description here

Quelle

2013-05-08 Tony_Henrich

Sie Ihren Text auf eine Off-Screen-Leinwand ziehen könnten (dass ein neues Gewebe für die im Speicher ist), dann die Leinwand zu Ihrer Haupt-Leinwand zu ziehen, Ihre Clipping-Anwendung.

Dadurch können Sie jeden Teil Ihrer Offscreen-Leinwand zeichnen, wie zum Beispiel "Clipping", um den gewünschten Effekt zu erzielen. Dies kann mit regelmäßigen drawImage Verfahren erfolgen:

ctx.drawImage([x: adjust for clipping], y, w, h, sourceCanvas, 0, 0, w, h);

Sie werden natürlich cacluate, wie viel Clip.

Hoffe das macht Sinn!

Quelle

2013-05-08 00:49:56 Jarrod

Eine Alternative zu Jarrods nützlicher Technik ist die Verwendung eines Ausschnittbereichs beim Zeichnen Ihres Textes.

Zum Beispiel, wenn Ihre y-Achse bei 30px ist, wird für diesen Clip nicht Text links von 30px

ctx.rect(30,0,canvas.width-30,canvas.height); 
ctx.clip();

Dann fillText ziehen wird alles verlassen links Ihre y-Achse ungestört (was in Ihrem „ -ELLO“)

ctx.fillText(theText,20,50);

Hier Code und ein Fiddle: http://jsfiddle.net/m1erickson/Q5Pfa/

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

    clipTextToGrid(50,"HELLO","48px verdana"); 

    function clipTextToGrid(leftAxisBorder,theText,font){ 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.rect(leftAxisBorder,0,canvas.width-leftAxisBorder,canvas.height); 
     ctx.clip(); 
     ctx.font=font; 
     ctx.fillText(theText,3,50); 
     ctx.restore(); 
    } 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

Quelle

2013-05-09 21:56:30 markE

Einige Anmerkungen:

~~1) Wenn Sie das Ende des Textes befestigen möchten, können Sie den optionalen Parameter maxWidth von fillText() verwenden.~~

2) Andere Clipping-Methode mit globalCompositeOperation ist here dargestellt.

Quelle

2014-02-10 16:33:17

Wie schneidet man einen Teil eines Textes in HTML5-Canvas ab?

Antwort

Verwandte Themen