diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/api/canvas_api/tutorial/drawing_text | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/api/canvas_api/tutorial/drawing_text')
-rw-r--r-- | files/ca/web/api/canvas_api/tutorial/drawing_text/index.html | 166 |
1 files changed, 0 insertions, 166 deletions
diff --git a/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html deleted file mode 100644 index b7bd981cd9..0000000000 --- a/files/ca/web/api/canvas_api/tutorial/drawing_text/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: Dibuixar text -slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphics - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text -original_slug: Web/API/Canvas_API/Tutorial/Dibuixar_text ---- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> - -<div class="summary"> -<p>Després d'haver vist com <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">aplicar estils i colors</a> en el capítol anterior, ara veurem com dibuixar text sobre canvas.</p> -</div> - -<h2 id="Dibuixar_text">Dibuixar text</h2> - -<p>El context de representació de canvas proporciona dos mètodes per representar el text:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> - <dd>Omple un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> - <dd>Traça un text donat en la posició donada (x, y). Opcionalment amb ample màxim per dibuixar.</dd> -</dl> - -<h3 id="Un_exemple_de_fillText">Un exemple de <code>fillText</code></h3> - -<p><span class="short_text" id="result_box" lang="ca"><span>El text s'omple usant l'actual</span></span> <code>fillStyle</code>.</p> - -<pre class="brush: js;highlight[4]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.font = '48px serif'; - ctx.fillText('Hello world', 10, 50); -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> - -<h3 id="Un_exemple_de_strokeText">Un exemple de <code>strokeText</code></h3> - -<p><span class="short_text" id="result_box" lang="ca"><span>El text s'omple usant l'actual</span></span> <code>strokeStyle</code>.</p> - -<pre class="brush: js;highlight[4]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - ctx.font = '48px serif'; - ctx.strokeText('Hello world', 10, 50); -}</pre> - -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> - -<pre class="brush: js">draw();</pre> -</div> - -<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> - -<h2 id="Estil_de_text">Estil de text</h2> - -<p>En els exemples anteriors ja hem fet ús de la propietat <code>font</code> per fer el text una mica més gran que la grandària predeterminada. Hi ha algunes propietats més que permeten ajustar la forma en què el text es mostra en el llenç:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> - <dd>L'estil de text actual que s'utilitza en dibuixar text. Aquesta cadena utilitza la mateixa sintaxi que la propietat <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}}. La font predeterminada és 10px sans-serif.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> - <dd>Configuració de l'alineació del text. Valors possibles: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> o <code>center</code>. El valor predeterminat és <code>start</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> - <dd>Configuració d'alineació de la línia de base. Valors possibles: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. El valor predeterminat és <code>alphabetic</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> - <dd>Direccionalitat. Valors possibles: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. El valor predeterminat és <code>inherit</code>.</dd> -</dl> - -<p>Aquestes propietats poden ser familiars, si heu treballat abans amb CSS.</p> - -<p>El següent diagrama del <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> mostra les diverses línies de base compatibles amb la propietat <code>textBaseline</code>.<img alt="La part superior del quadrat em està aproximadament en la part superior dels glifos en una font, la línia de base penjant és on alguns glifos com आ estan ancorats, el mitjà està a mig camí entre la part superior del quadrat em i la part inferior del quadrat em,la línia de base alfabètica és on ancoren caràcters com Á, ÿ, -f i Ω, la línia de base ideográfica és on glifos com 私 i 達 estan ancorats, i la part inferior del quadrat em està aproximadament en la part inferior dels glifos en una font. La part superior i inferior del quadre delimitador pot estar lluny d'aquestes línies de base, a causa que els glifos s'estenen molt més allà del quadrat em." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> - -<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3> - -<p>Editeu el codi següent i vegeu els canvis actualitzats en directe en el llenç:</p> - -<pre class="brush: js;highlight[2]">ctx.font = '48px serif'; -ctx.textBaseline = 'hanging'; -ctx.strokeText('Hello world', 0, 100); -</pre> - -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> - -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -ctx.font = "48px serif"; -ctx.textBaseline = "hanging"; -ctx.strokeText("Hello world", 0, 100);</textarea> -</pre> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var edit = document.getElementById('edit'); -var code = textarea.value; - -function drawCanvas() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - drawCanvas(); -}); - -edit.addEventListener('click', function() { - textarea.focus(); -}) - -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Mesures_avançades_de_text">Mesures avançades de text</h2> - -<p>En el cas de necessitar obtenir més detalls sobre el text, el següent mètode permet mesurar-ho.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> - <dd>Retorna un objecte {{domxref("TextMetrics")}} que conté l'amplada, en píxels, que serà el text especificat quan es dibuixi en l'estil de text actual.</dd> -</dl> - -<p>El següent fragment de codi mostra com es pot mesurar un text i obtenir la seva amplada</p> - -<pre class="brush: js;highlight[3]">function draw() { - var ctx = document.getElementById('canvas').getContext('2d'); - var text = ctx.measureText('foo'); // TextMetrics object - text.width; // 16; -} -</pre> - -<h2 id="Notes_específiques_de_Gecko"><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">Notes específiques de Gecko</span></h2> - -<p>En Gecko (el motor de representació de Firefox, Firefox OS i altres aplicacions basades en Mozilla), es van implementar algunes <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">APIs prefixades</a> en versions anteriors per dibuixar text en un llenç. Ara estan desaprovades i eliminades, ja no es garanteix el seu funcionament.</p> - -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> - -<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="position: absolute; left: 348px; top: 2154px;"> -<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> - -<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div> - -<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div> -</div> |