getImageData() メソッドは、キャンバスの指定された四角形のピクセル データをコピーする ImageData オブジェクトを返します。
注: ImageData オブジェクトは画像ではありません。キャンバスの一部 (四角形) を指定し、四角形内の各ピクセルの情報を保存します。
ImageData オブジェクトの各ピクセルには、RGBA 値という 4 つの側面の情報があります。
A - アルファ チャネル (0 ～ 255、0 は透明、255 は完全に表示)
カラー/アルファ情報は配列の形式で存在し、ImageData オブジェクトの data 属性に格納されます。
ヒント: 配列内のカラー/アルファ情報を操作した後、putImageData() メソッドを使用して画像データをキャンバスにコピーして戻すことができます。
2つのコード <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; <title> 透明度を変更する</title></head><body><h2> 透明度を変更する</h2><canvas id=mc width=600 height=460 style=border:1px Solid black></canvas><script type=text/javascript> // キャンバス要素に対応する DOM オブジェクトを取得します var Canvas = document.getElementById('mc') // キャンバス上に描画するための CanvasRenderingContext2D オブジェクトを取得します var ctx = Canvas.getContext('2d'); var image = new Image() image.src = test.png; //透明度パラメータを指定したメソッドを使用して画像を描画しますdrawImage(image, 124, 20, 0.4) } vardrawImage = function(image, x, y, alpha) { // 画像を描画します ctx.drawImage(image, x, y) ); // x、y から始まり、幅が image.width、高さが image.height の画像データを取得します // つまり、描画された画像データ var を取得しますimgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // 各ピクセルの透明度を変更しますimgData.data[i + 3] = imgData.data[i + 3] * alpha; } // 取得した画像データを元に戻します。 ctx.putImageData(imgData, x, y) }</script></body></html> 3つの実行結果以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。