HTML5 - さんは、私がこれを使用して矩形のHTML5要素を描きましょうドロー長方形

の不透明度を変更します。HTML5 - さんは、私がこれを使用して矩形のHTML5要素を描きましょうドロー長方形

context.clearRect(25, 72, 32, 32);

は、どのように私はそれが50％透明にするのでしょうか？

出典

2012-05-07 nn2

グローバルアルファを使用してください。また、fillRectを使用して描画する必要があります。 clearRectはピクセルを消去するだけです。部分的に消去することはできませんので、fillRectやその他の描画プリミティブを使用する必要があります。 w3schools.comから

：

ctx.globalAlpha = 0.2; 
    ctx.fillRect(50,50,75,50); 
    ctx.globalAlpha = 1.0;

出典

2012-05-07 19:43:34

これは –

ブライアン（クローム少なくとも上の）全体のキャンバスが透明になり、それは全体のキャンバス、あなたがそれを与えるだけのサイズと位置をクリアしていません。それはそれらの4つの数字です。最初の2つはキャンバス上のX座標、次にY座標、そして消去したいrectのサイズXとYです。（キャンバスでY値が大きくなるにつれて、その値が大きくなることを覚えておいてください） –

描画呼び出しを防ぐために、これらの2行の後に 'ctx.globalAlpha = 1;'を呼び出す必要がありますそれを信じるかしないか）は、部分的に透明であることもありません。 –

ClearRectがあったものを削除し、空白のままにします。最も良い方法は、矩形（または描画している他の図形）のみを透明にするため、rgbaのfillStyle値を使用することです。コードは次のようになります。

ctx.fillStyle = 'rgba(225,225,225,0.5)'; 
ctx.fillRect(25,72,32,32);

（感謝How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?）

出典

2013-07-03 22:36:12

私はそれを使用した後にすべての図面にグローバルに影響を及ぼすわけではないので、選択した答えに対してこれを好む。 –

コンテキストを保存して復元することで、他のコンテキスト変更を囲む 'ctx.save（）'と 'ctx.restore（）'を使ってグローバルに影響を与えないようにすることができます。 –

私はこれが最も一般的ですが、これはもっと具体的です：どの操作の透明度ではなく、塗りの透明度（私は長方形を 'きれいにする'）を話します。 2つのソリューションには4行が必要です（コンテキストを保持するためにctx.save（）とctx.restore（）が必要なため）。とにかく、2つの解決策は私のために良いです。 – ddcovery

HTML5 - さんは、私がこれを使用して矩形のHTML5要素を描きましょうドロー長方形

答えて

関連する問題