Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Ausführliche Erklärung zum Festlegen von Farbe und Transparenz beim Zeichnen von HTML5 Canvas_html5-Tutorial-Fähigkeiten

Ausführliche Erklärung zum Festlegen von Farbe und Transparenz beim Zeichnen von HTML5 Canvas_html5-Tutorial-Fähigkeiten

WBOY
Freigeben： 2016-05-16 15:45:15
Original
2180 Leute haben es durchsucht

Farbe angeben

Schwarz ist die Standardfarbe für Canvas-Zeichnungen. Wenn Sie sie in eine andere Farbe ändern möchten, müssen Sie die Farbe vor dem eigentlichen Zeichnen angeben.

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. ctx.StrokeStyle = Farbe

Geben Sie die Farbe der gezeichneten Linie an:

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. ctx.fillStyle = color

Geben Sie die Farbe der Füllung an:
Sehen wir uns ein praktisches Beispiel an:

JavaScript

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. onload = function() {
  2. draw();
  3. };
  4. Funktion draw() {
  5. var canvas = document.getElementById('c1');
  6. if ( ! canvas || ! canvas.getContext ) { return false ; }
  7. var ctx = canvas.getContext('2d');
  8. ctx.beginPath();
  9. ctx.fillStyle = 'rgb(192, 80, 77)'; // Rot
  10. ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  11. ctx.fill();
  12. ctx.beginPath();
  13. ctx.fillStyle = 'rgb(155, 187, 89)'; // Grün
  14. ctx.arc(45, 95, 35, 0, Math.PI*2, false);
  15. ctx.fill();
  16. ctx.beginPath();
  17. ctx.fillStyle = 'rgb(128, 100, 162)'; // Lila
  18. ctx.arc(95, 95, 35, 0, Math.PI*2, false);
  19. ctx.fill();
  20. }

Der Effekt ist wie folgt:
2016325112217008.png (142×142)

Transparenz angeben

Genau wie bei gewöhnlichem CSS können wir bei der Angabe der Farbe auch einen Alpha-Wert angeben (dieser wird jedoch nicht häufig verwendet und wurde vor IE9 nicht unterstützt). Schauen Sie sich den Code an:

JavaScript

JavaScript-CodeInhalt in die Zwischenablage kopieren
  1. onload = function() {   
  2.   draw();   
  3. };   
  4. Funktion draw() {   
  5.   var canvas = document.getElementById('c1');   
  6.   if ( ! canvas || ! canvas.getContext ) { return false ; }   
  7.   var ctx = canvas.getContext('2d');   
  8.   ctx.beginPath();   
  9.   ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //   
  10.   ctx.arc(70, 45, 35, 0, Math.PI*2, false);   
  11.   ctx.fill();   
  12.   ctx.beginPath();   
  13.   ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //   
  14.   ctx.arc(45, 95, 35, 0, Math.PI*2, false);   
  15.   ctx.fill();   
  16.   ctx.beginPath();   
  17.   ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //   
  18.   ctx.arc(95, 95, 35, 0, Math.PI*2, false);   
  19.   ctx.fill();   
  20. }   

结果就是下面这样：
2016325112248089.png (142×142)

和上面的代码基本没变化，就是把rgb(r, g, b)变成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明1则是完全不透明（所以alpha的值实际上是“不透明度“）.


全局透明globalAlpha
这个也是很简单的一个属性,默认值为1.0,代表完全不透明,取值范围是0.0（完全透明）~1.0。这个属性与阴影设置是一样的, 如果不想针对全局设置不透明度, 就得在下次绘制前重置globalAlpha.

总结一下：基于状态的属性有哪些？

——globalAlpha

——globalCompositeOpeartion

——StrokeStyle

——textAlign,textBaseline

——lineCap,lineJoin,lineWidth,miterLimit

——fillStyle

——Schriftart

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我们通过一个代码,来体验一下globalAlpha的神奇之处~

JavaScript-Code复制内容到剪贴板
  1.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     全局透明   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  • <script>   </span></li> <li class="alt"> <span>    window.onload = </span><span class="keyword">Funktion</span><span>(){   </span> </li> <li> <span>        </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>);   </span> </li> <li class="alt"><span>        canvas.width = 800;   </span></li> <li><span>        canvas.height = 600;   </span></li> <li class="alt"> <span>        </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>);   </span> </li> <li> <span>        context.fillStyle = </span><span class="string">"#FFF"</span><span>;   </span> </li> <li class="alt"><span>        context.fillRect(0,0,800,600);   </span></li> <li><span>  </span></li> <li class="alt"><span>        context.globalAlpha = 0.5;   </span></li> <li><span>  </span></li> <li class="alt"> <span>        </span><span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i=0; i<=50; i ){   </span></li> <li><span>            </span><span class="keyword">var</span><span> R = Math.floor(Math.random() * 255);   </span></li> <li class="alt"><span>            </span><span class="keyword">var</span><span> G = Math.floor(Math.random() * 255);   </span></li> <li><span>            </span><span class="keyword">var</span><span> B = Math.floor(Math.random() * 255);   </span></li> <li class="alt"><span>  </span></li> <li><span>            context.fillStyle = </span><span class="string">"rgb("</span><span>   R   </span><span class="string">","</span><span>   G   </span><span class="string">" ,"</span><span>   B   </span><span class="string">")"</span><span>;   </span></li> <li class="alt"><span>  </span></li> <li><span>            context.beginPath();   </span></li> <li class="alt"><span>            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   </span></li> <li><span>            context.fill();   </span></li> <li class="alt"><span>        }   </span></li> <li><span>    };   </span></li> <li class="alt"><span></script>   
  •   
  •   

    • 运行结果：
    2016325112320763.jpg (850×500)

    是不是非常的酷？终于有点艺术家的范儿了吧.

    Verwandte Etiketten：
    canvas html5 透明度 颜色
    Quelle：php.cn
    Vorheriger Artikel：Tipps zum Verwenden von Eingabeereignissen zum Überwachen mobiler input_html5-Tutorials Nächster Artikel：Eingehende Analyse der Methode zur Steuerung der Grafikmatrixtransformation in HTML5 Canvas_html5 Tutorial-Fähigkeiten
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
    Aus 2024-04-06 15:33:12
    0
    1
    433
    Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
    Aus 2024-04-05 12:57:00
    0
    1
    456
    Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
    Aus 2024-04-02 11:47:56
    0
    1
    275
    Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
    Aus 2024-04-01 20:42:38
    0
    1
    259
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage