「JavaScript/Canvas」の版間の差分

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