1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: Composició i retall
slug: Web/API/Canvas_API/Tutorial/Composició
tags:
- Canvas
- Graphics
- HTML
- HTML5
- Intermediate
- Tutorial
translation_of: Web/API/Canvas_API/Tutorial/Compositing
---
<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
<div class="summary">
<p>En tots els nostres <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples anteriors</a>, les formes sempre s'han dibuixat una damunt de l'altra. Això és més que adequat per a la majoria de les situacions, però limita l'ordre en què es construeixen formes compostes. No obstant això, podem canviar aquest comportament establint la propietat <code>globalCompositeOperation</code>. A més, la propietat <code>clip</code> permet ocultar parts de formes no desitjades.</p>
</div>
<h2 id="globalCompositeOperation" name="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
<p>No només podem dibuixar noves formes darrere de les formes existents, sinó que també, podem utilitzar-ho per emmascarar certes àrees, esborrar seccions del llenç (no limitades a rectangles, com ho fa el mètode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) i molt més.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
<dd>Estableix el tipus d'operació de composició que s'aplicarà en dibuixar noves formes, on el tipus és una cadena que identifica quina de les dotze operacions de composició ha d'utilitzar-se.</dd>
</dl>
<p>Veure <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing/Example">exemples de composició</a> per al codi dels següents exemples.</p>
<p>{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
<h2 id="Clipping_paths" name="Clipping_paths">Trajectòries de retall</h2>
<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/209/Canvas_clipping_path.png" style="float: right;">Una trajectòria de retall és com una forma de llenç normal, però actua com una màscara per ocultar parts no desitjades de formes. Això es visualitza en la imatge de la dreta. La forma d'estel vermell és la nostre trajectòria de retall. Tot el que queda fora d'aquesta trajectòria no es dibuixarà en el llenç.</p>
<p>Si comparem les trajectòries de retall amb la propietat <code>globalCompositeOperation</code>, que hem vist anteriorment, veiem dos modes de composició que aconsegueixen més o menys el mateix efecte en <code>source-in</code> i <code>source-atop</code>. Les diferències més importants entre les dues, són que les trajectòries de retall mai es dibuixen realment al llenç i la trajectòria de retall mai es veu afectada per l'addició de noves formes. Això fa que les trajectòries de retall siguin ideals per dibuixar múltiples formes en un àrea restringida</p>
<p>En el capítol sobre <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">dibuixar formes</a>, només s'ha esmentat els mètodes <code>stroke()</code> i <code>fill()</code>, però hi ha un tercer mètode que es pot utilitzar amb les trajectòries, anomenat <code>clip()</code>.</p>
<dl>
<dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
<dd>Converteix la trajectòria que s'està construint, en la trajectòria de retall actual.</dd>
</dl>
<p>Utilitzar <code>clip()</code> en lloc de <code>closePath()</code> per tancar una trajectòria i convertir-la en una trajectòria de retall en lloc de traçar o emplenar la trajectòria.</p>
<p>Per defecte, l'element {{HTMLElement("canvas")}}, té una trajectòria de retall de la mateixa grandària que el propi llenç. En altres paraules, no es produeix cap retall.</p>
<h3 id="A_clip_example" name="A_clip_example">Un exemple de <code>clip</code></h3>
<p>En aquest exemple, utilitzarem un trajectòria de retall circular per restringir el dibuix d'un conjunt d'estels aleatòries a una regió en particular.</p>
<pre class="brush: js;highlight[9]">function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0, 0, 150, 150);
ctx.translate(75, 75);
// Crea una trajectòria de retall circular
ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip();
// dibuixa el fons
var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');
ctx.fillStyle = lingrad;
ctx.fillRect(-75, -75, 150, 150);
// dibuixa els estels
for (var j = 1; j < 50; j++) {
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75 - Math.floor(Math.random() * 150),
75 - Math.floor(Math.random() * 150));
drawStar(ctx, Math.floor(Math.random() * 4) + 2);
ctx.restore();
}
}
function drawStar(ctx, r) {
ctx.save();
ctx.beginPath();
ctx.moveTo(r, 0);
for (var i = 0; i < 9; i++) {
ctx.rotate(Math.PI / 5);
if (i % 2 === 0) {
ctx.lineTo((r / 0.525731) * 0.200811, 0);
} else {
ctx.lineTo(r, 0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
</pre>
<div class="hidden">
<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre>
<pre class="brush: js">draw();</pre>
</div>
<p>En les primeres línies de codi, dibuixem un rectangle negre de la grandària del llenç com a fons, després traslladem l'origen al centre. A continuació, creem la trajectòria de retall circular, dibuixant un arc i cridem <code>clip()</code>. Les trajectòries de retall també formen part de l'estat de guardat del llenç. Si haguéssim volgut mantenir la trajectòria de retall original, podríem haver guardat l'estat del llenç abans de crear el nou.</p>
<p>Tot el que es dibuixa després de crear la trajectòria de retall, només apareixerà dins d'aquesta trajectòria. Es pot veure això clarament, en el gradient lineal que es dibuixa a continuació. Després d'això, es dibuixa un conjunt de 50 estels posicionats aleatòriament i escalats, usant la funció personalitzada <code>drawStar()</code>. De nou, els estels, només apareixen dins de la trajectòria de retall definida.</p>
<p>{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}</p>
<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
|
