Come tagliare parte di un testo nella tela HTML5?

Ho un testo disegnato su una tela HTML5. Come faccio a tagliare o nascondere parte del testo che si trova a sinistra di una linea?Come tagliare parte di un testo nella tela HTML5?

In questo esempio, la parte della parola "HELLO" viene ritagliata a sinistra della linea rossa.

Ci sono due limitazioni:

Tutto deve essere disegnato sulla stessa tela. Nessuna nuova tele da creare
La linea rossa nel mio vero lavoro è l'asse y di un grafico. Sul lato sinistro della linea rossa ci sono le etichette per l'asse. Quindi immagina che ci siano cose disegnate su quel lato e che devono mostrare. Quella parte non può essere bloccata o cancellata.

enter image description here

fonte

2013-05-08 Tony_Henrich

Si potrebbe richiamare il testo a una tela schermo spento (che essendo una nuova tela che è in memoria), quindi disegnare quella tela al disegno principale, applicare il ritaglio.

Ciò consentirà di disegnare qualsiasi parte della tela fuori schermo, ad esempio "ritagliarla" per ottenere l'effetto desiderato. Questo può essere fatto con regolare metodo drawImage:

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

Avrete ovviamente bisogno di cacluate quanto per Clip.

Spero che abbia senso!

fonte

2013-05-08 00:49:56 Jarrod

Un'alternativa alla tecnica utile di Jarrod consiste nell'utilizzare un'area di ritaglio quando si disegna il testo.

Ad esempio se il vostro asse y è a 30px, questa clip volontà non disegnare il testo alla sinistra di 30px

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

Poi fillText lascerà qualcosa di sinistra del vostro asse y indisturbata (con conseguente vostro “ -ELLO”)

ctx.fillText(theText,20,50);

Ecco codice e un violino: 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>

fonte

2013-05-09 21:56:30 markE

Alcune note:

~~1) Se si vuole agganciare il fine del testo, è possibile utilizzare il parametro opzionale maxWidth di fillText().~~

2) Altro metodo di ritaglio utilizzando globalCompositeOperation è rappresentato here.

fonte

2014-02-10 16:33:17

Come tagliare parte di un testo nella tela HTML5?

risposta

Problemi correlati