No.2
- 回答日時:
HTML5 にて導入されたグローバル属性 data-* は、一般的には HTML アプリケーションの為の情報です。
それまで id や class や独自属性名で行われていたものを、セマンティクス強化のために分離されました。
スクリプトにて読み書きする HTML 要素の値の中で、
一般的な属性では意味的に合わないようなデータの場合に使用します。
JSON で複雑な情報を記載したり、要素毎に記録したい情報などに使用してください。
参考
https://developer.mozilla.org/ja/docs/Web/HTML/G …
No.1ベストアンサー
- 回答日時:
data属性は、RGBAの順で0~255の範囲の数値が一次配列となったデータを返します。
この配列データは、ImageDataオブジェクトの各ピクセルが保有している色と透明度を表します。ImageDataオブジェクトの各ピクセルは、ImageDataオブジェクトの左上から右下に順番に並んでおり h×w×4つの整数 で表すことができます。 hはImageDataオブジェクトの上からの位置を表します。wは高さhにおける左からの位置を表します。 4つの整数はそれぞれ0~255の範囲の数値で、順番に赤(R)・緑(G)・青(B)・透明度(A)を表します。
使用例
HTML + JavaScriptソース
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
//描画コンテキストの取得
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//寸法100×80のImageDataオブジェクトを生成
var img01 = context.createImageData(100, 80);
//ImageDataオブジェクトのRGBA値をテキストとして描画
context.fillText(img01.data, 20, 20);
context.fillText("R:"+img01.data[0], 20, 40);
context.fillText("G:"+img01.data[1], 20, 60);
context.fillText("B:"+img01.data[2], 20, 80);
context.fillText("A:"+img01.data[3], 20, 100);
}
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VBA 同じ名前のオブジェクトを...
-
Excelで =EMBED("Acrobat Docu...
-
3Dの背景とはどういう作り方を...
-
Object型からDouble型へのキャスト
-
LISTBOXの内容が更新されま...
-
エクリプス コンテンツアシスト...
-
VBAのWindowオブジェクトとWork...
-
エクセルでオブジェクト内の文...
-
VBからBATファイルを起動して戻...
-
オブジェクトを枠線に合わせる...
-
CException についてVC6とVC200...
-
Ajax.Requestについて
-
戻り値がクラスオブジェクト
-
Resetオブジェクトについて
-
error C2712: オブジェクト ア...
-
時間帯判定をする。
-
MATLABプロットの線にアルファ...
-
JSPのout.printについて
-
COMコンポーネントって何?
-
オブジェクトに値を保持させる...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
パワーポイントのVBAでテキスト...
-
Excelで =EMBED("Acrobat Docu...
-
VBA 同じ名前のオブジェクトを...
-
EXCEL VBAにて動的にCheckBOXを...
-
VBAのWindowオブジェクトとWork...
-
C#でフォームのオブジェクト名...
-
ワイルドカード<?>と型パラメー...
-
COMコンポーネントって何?
-
ビジュアルC++でボタンの有...
-
Object型からDouble型へのキャスト
-
error C2712: オブジェクト ア...
-
newは明示的にした方が良いのか?
-
オブジェクトレベルとメタレベル
-
0 == False はいいけど
-
ASP.net 教えてください!!(...
-
LISTBOXの内容が更新されま...
-
戻り値がクラスオブジェクト
-
時間帯判定をする。
-
Vbで通常使用するプリンターを...
-
ワードで画像をドロップすると...
おすすめ情報