「JavaScript/Canvas」の版間の差分
削除された内容 追加された内容
→imageData へのアクセスを使った高速化: <span style="font-weight:bold;border:3px solid blue;padding:5px; border-radius:5px">[http://plnkr.co/edit/OftprIudgMndnB84?preview Plunkerで開く]</span> |
syntaxhighligh |
||
62 行
'''マンデルブロ集合を描画するプログラム'''
<
<!DOCTYPE html>
<html lang='ja'>
130 行
</body>
</html>
</syntaxhighlight>
<span style="font-weight:bold;border:3px solid blue;padding:5px; border-radius:5px">[http://plnkr.co/edit/OftprIudgMndnB84?preview Plunkerで開く]</span>
まとまった長さのプログラムなのでステップ・バイ・ステップの解説は行いませんが、要点だけ。
<
<body onload='init()'>
</syntaxhighlight>
Loadが終わるまで(DOMが準備完了に成るまで)Canvasは使えないのでBODY要素のonload属性に初期化メソッドinitを設定します。
<
{clientWidth, clientHeight} = canvas,
</syntaxhighlight>
Canvasとは直接関係ありませんが、オブジェクトのプロパティの値を同名の変数に代入するイデオムです。
<
clientWidth = canvas.clientWidth, clientHeight = canvas.clientHeight,
</syntaxhighlight>
と同じです。<br>
短くかけるとともに、ミスタイプの入り込む余地がなく元のオブジェクトのプロパティ名の変数の名付けを行う動機づけになります(別の名前の変数にプロパティを代入する構文もあります)。
<
let imageData = // Canvas要素から描画用ImageDataを取得
context.createImageData(clientWidth, clientHeight),
index = 0; // buffer のインデックス左上が0
</syntaxhighlight>
Canvas オブジェクトの領域にあるピクセルデータ(ImageData オブジェクト)を得ています<ref>https://momdo.github.io/html/canvas.html#imagedata</ref>。
imageData.dataプロパティはUint8ClampedArrayオブジェクトです。
166 行
このUint8ClampedArraオブジェクトのimageData.dataは
<
[
R(0,0), G(0,0), B(0,0), A(0,0), R(1,0), G(1,0), B(1,0), A(1,0), ... R(width-1,0), G(width-1,0), B(width-1,0), A(width-1,0),
174 行
R(0,height-1), G(0,height-1), B(0,height-1), A(0,height-1), ... R(width-1,height-1), G(width-1,height-1), B(width-1,height-1), A(width-1,height-1),
]
</syntaxhighlight>
という(二次元ではなく)一次元配列で、赤 緑 青 透過率 の4バイトの対が左から右・上から下の順で並んでいます。
<
context.putImageData(imageData, 0, 0);
document.querySelector("#link").setAttribute("href", canvas.toDataURL());
</syntaxhighlight>
imageDataに操作を行ったあと、putImageDataメソッドでCanvasで反映します。<br>
次の行のtoDataURLメソッドはCanvasの中のイメージを data: スキームで(ディフォルトでは img/png で)返します。
185 行
'''HAMLで書いたソース'''
<
!!!
:ruby
250 行
}
}
</syntaxhighlight>
===マンデルブロ集合を描画するプログラム:実行例===
|