透明度を変更するためのキャンバスピクセル処理コード
2022-01-31 04:06:23
I 定義と使用法
getImageData()メソッドは、キャンバスの指定された矩形領域のピクセルデータをコピーしたImageDataオブジェクトを返します。
注：ImageDataオブジェクトは画像ではありません。キャンバスの一部（矩形）を指定し、その矩形内の各ピクセルに関する情報を保持します。
ImageDataオブジェクトの各ピクセルには、RGBA値という4つの側面の情報が存在します。
- R - 赤 (0-255)
- G - グリーン (0-255)
- B - ブルー (0-255)
A - アルファチャンネル (0-255。0は透明、255は完全に可視)
色/アルファ情報は配列形式で、ImageData オブジェクトの data プロパティに格納されます。
ヒント 配列内の色/アルファ情報を操作した後、putImageData()メソッドを使用して画像データをキャンバスにコピーして戻すことができます。
II コード
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> change transparency </title>
</head>
<body>
<h2> Change transparency </h2>
<canvas id="mc" width="600" height="460"
style="border:1px solid black"></canvas>
<script type="text/javascript">
// Get the DOM object corresponding to the canvas element
var canvas = document.getElementById('mc');
// Get the CanvasRenderingContext2D object that draws on the canvas
var ctx = canvas.getContext('2d');
var image = new Image();
image.src = "test.png";
image.onload = function()
{
// Draw the image with the transparency parameter
drawImage(image , 124 , 20 , 0.4);
}
var drawImage = function(image , x , y , alpha)
{
// Draw the image
ctx.drawImage(image , x , y);
// Get the image data starting from x, y, width of image.width and height of image.height
// that is, get the data of the drawn image
var imgData = ctx.getImageData(x , y , image.width , image.height);
for (var i = 0 , len = imgData.data.length ; i < len ; i += 4 )
{
// Change the transparency of each pixel
imgData.data[i + 3] = imgData.data[i + 3] * alpha;
}
// Put back the fetched image data.
ctx.putImageData(imgData , x , y);
}
</script>
</body>
</html>
III 実行結果
以上が今回の記事の内容ですが、皆様の学習の一助となり、スクリプトハウスをより一層応援していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン