コニファ・ロゴ

csstest:Canvasとjavascriptを使って、画像の色を変更

Canvasとjavascriptを使って、画像の色を変更します。
(※初出の時、想定したとおりの動きになっていなかったため、以下のテキストを含め修正しました)

画像は写真を加工したもので、花部分を白、文字の「サンプル画像」部分を黒にして、その他を透過にしたpng画像です。透過部分は親要素の背景色の黒(#000000)が見えているため、文字は見えません。
「色を変更」ボタンをクリックすると、色の値を入力するプロンプトが開きます。16進数で色を入力(#は必須で、6文字表記または3文字表記)すると、透過部分以外にその色が適用されます。文字も同じ色になり、見えるようになります。

 

 

戻るボタン