So legen Sie Farbe und Transparenz beim Zeichnen von HTML5 Canvas fest-H5-Tutorial-php.cn

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

不言

Freigeben： 2018-06-05 14:02:38

Original

2878 Leute haben es durchsucht

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

Nach dem Login kopieren

Geben Sie die Farbe der gezeichneten Linie an:

JavaScript-Code Inhalt in die Zwischenablage kopieren

ctx.fillStyle = color

Nach dem Login kopieren

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();   
}

Nach dem Login kopieren

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();   
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!