ホームページ > 記事 > ウェブフロントエンド > HTML5 Canvas描画時に色と透明度を指定する方法

HTML5 Canvas描画時に色と透明度を指定する方法

不言オリジナル: 2018-06-05 14:02:382890ブラウズ

この記事では、グローバルの透明な globalAlpha 属性の導入を含め、HTML5 Canvas を描画するときに色と透明度を指定する方法を主に紹介します。必要な友達はそれを参照してください。

色の指定

Canvas 描画のデフォルトの色は黒です。色を変更したい場合は、実際にペイントする前に色を指定する必要があります。

JavaScriptコードコンテンツをクリップボードにコピーします

ctx.strokeStyle = color

描いた線の色を指定します:

JavaScriptコードコンテンツをクリップボードにコピーします

ctx.fillStyle = color

塗りつぶしの色を指定します:

実際に動作を見てみましょう例:

JavaScript

JavaScriptコードコンテンツをクリップボードにコピーします

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

効果は次のとおりです:
2016325112217008.png (142×142)

透明度を指定します

通常のCSSと同じように、アルファ値を指定するときに色を指定することもできます (ただし、これはあまり使用されておらず、IE9 より前ではサポートされていませんでした)。コードを見てください:

JavaScript

JavaScript コードコンテンツをクリップボードにコピーします

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

結果は次のようになります:
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

——ストロークStyle

——textAlign、textBaseline

——lineCap、lineJoin、lineWidth、miterLimit

——fillStyle

——font

——shadowBlur、shadowColor 、shadowOffsetX、shadowOffsetY
コードを通してglobalAlphaの魔法を体験してみましょう~

JavaScriptコードコンテンツをクリップボードにコピーします

<!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>

実行結果:
2016325112320763.jpg (850×500)

とてもクールではないでしょうか?ようやくアーティストになった気分です。

HTML5 Canvas描画時に色と透明度を指定する方法

関連記事