Heim > Artikel > Web-Frontend > So legen Sie Farbe und Transparenz beim Zeichnen von HTML5 Canvas fest

So legen Sie Farbe und Transparenz beim Zeichnen von HTML5 Canvas fest

不言Original: 2018-06-05 14:02:382890Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum Festlegen von Farbe und Transparenz beim Zeichnen von HTML5 Canvas vorgestellt, einschließlich der Einführung des globalen transparenten globalAlpha-Attributs. Freunde in Not können sich auf

Farbe festlegen

Schwarz ist die Standardfarbe für Canvas-Zeichnungen. Wenn Sie zu einer anderen Farbe wechseln möchten, müssen Sie die Farbe vor dem eigentlichen Zeichnen angeben.

JavaScript-CodeInhalt in die Zwischenablage kopieren

ctx.strokeStyle = color

Geben Sie die Farbe der gezeichneten Linie an:

JavaScript-Code Inhalt in die Zwischenablage kopieren

ctx.fillStyle = color

Füllfarbe angeben:

Sehen wir uns ein praktisches Beispiel an:

JavaScript

JavaScript-CodeKopieren Sie den Inhalt in die Zwischenablage

onload = function() {   
  draw();   
};   
function draw() {   
  var canvas = document.getElementById(&#39;c1&#39;);   
  if ( ! canvas || ! canvas.getContext ) { return false; }   
  var ctx = canvas.getContext(&#39;2d&#39;);   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgb(192, 80, 77)&#39;; // 红 
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgb(155, 187, 89)&#39;; // 绿 
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgb(128, 100, 162)&#39;; // 紫 
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
}

Der Effekt ist wie folgt:

2016325112217008.png (142×142)

Transparenz angeben

ist dasselbe wie in gewöhnlichem CSS. Wenn wir die Farbe angeben, können wir auch einen Alphawert angeben (dieser wird jedoch nicht häufig verwendet und wurde vor IE9 nicht unterstützt). Schauen Sie sich den Code an:

JavaScript

JavaScript-CodeKopieren Sie den Inhalt in die Zwischenablage

onload = function() {   
  draw();   
};   
function draw() {   
  var canvas = document.getElementById(&#39;c1&#39;);   
  if ( ! canvas || ! canvas.getContext ) { return false; }   
  var ctx = canvas.getContext(&#39;2d&#39;);   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgba(192, 80, 77, 0.7)&#39;; // 
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgba(155, 187, 89, 0.7)&#39;; // 
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
  ctx.beginPath();   
  ctx.fillStyle = &#39;rgba(128, 100, 162, 0.7)&#39;; // 
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);   
  ctx.fill();   
}

Das Ergebnis ist wie folgt :

2016325112248089.png (142×142)

Es ist im Grunde dasselbe wie der obige Code, außer dass rgb(r, g, b) in rgba(r, g, b, a) geändert wird a ist ebenfalls 0~1. 0 bedeutet vollständig transparent, 1 bedeutet vollständig undurchsichtig (der Alpha-Wert ist also tatsächlich „Opazität“).

Global transparent globalAlpha
Dies ist ebenfalls ein sehr einfaches Attribut, was bedeutet, dass der Wertebereich 0,0 (völlig transparent) ist 1,0. Diese Eigenschaft ist mit der Schatteneinstellung identisch. Wenn Sie die Deckkraft nicht global festlegen möchten, müssen Sie globalAlpha vor dem nächsten Zeichnen zurücksetzen.

Zusammenfassend: Was sind die zustandsbasierten Attribute?

——globalAlpha

——globalCompositeOpeartion

——StrokeStyle

——textAlign, textBaseline

——lineCap, lineJoin, lineWidth, miterLimit

——fillStyle

——font

——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY

Erleben wir die Magie von globalAlpha durch einen Code Where~

JavaScript-CodeInhalt in die Zwischenablage kopieren

<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>全局透明</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; } 
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
        context.globalAlpha = 0.5;   
        for(var i=0; i<=50; i++){   
            var R = Math.floor(Math.random() * 255);   
            var G = Math.floor(Math.random() * 255);   
            var B = Math.floor(Math.random() * 255);   
            context.fillStyle = "rgb(" + R + "," + G + "," + B + ")";   
            context.beginPath();   
            context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);   
            context.fill();   
        }   
    };   
</script>   
</body>   
</html>

Ergebnis ausführen:

2016325112320763.jpg (850×500)

Nicht wahr? sehr cool? Endlich fühle ich mich wie ein Künstler.

Verwandte Empfehlungen:

Verwenden Sie HTML5 Canvas, um Bilder mit Farbe und Textur zu füllen

Das obige ist der detaillierte Inhalt vonSo legen Sie Farbe und Transparenz beim Zeichnen von HTML5 Canvas fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Füllen Sie Bilder mit Farbe und Textur mit HTML5 CanvasNächster Artikel：Füllen Sie Bilder mit Farbe und Textur mit HTML5 Canvas

In Verbindung stehende Artikel

Mehr sehen