html svg

2017-02-16(木) 全体公開

先日、ニコニコにあったJSでオセロを作る動画を参考に、5目並べを製作。
動作に時間がかかりすぎるので解決法を模索中。
オセロでは、8*8のdiv要素を用意し1ターン毎作成し直しているんですが、
5目並べでこれをすると15*15要素あるんで、更新に300msかかる。

碁盤の線と碁石をcanvas描画から取得したpng画像を使用したんですが、
png画像をsvg画像にしたらどうかと実験。
結局動作時間はさほど変わらず。
↑画像の表示よりdiv要素の追加に時間がかかっているみたい。

svgについてメモ
html上で画像を描画する方法はcanvasとsvgがある。
canvasはJSを利用してピクセル分けされた領域に塗りを描写。
svgは要素を追加してパスを描写。
svgは要素の削除・追加をすることで絵を描き替えられますが、
canvasでは絵を上書きして更新していく必要があります。
また、canvasで書いた絵は拡大・縮小で劣化しますが、
svgはパス情報が保存されているので劣化しない。

svgは静止画や拡大したとき粗くしたくないもの向け。
canvasはJSと大きくかかわるんでゲームとかに向いている。

Катюша

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28

html svg

最近の日記

カレンダー