回答編集履歴
3
追記:コードに対する「監督コメント」
test
CHANGED
@@ -1,4 +1,8 @@
|
|
1
1
|
`html5 canvas`の[drawImage](http://www.html5.jp/canvas/ref/method/drawImage.html)と[toDataURL](http://www.html5.jp/canvas/ref/HTMLCanvasElement/toDataURL.html)を利用してみるのはどうでしょうか?
|
2
|
+
|
3
|
+
|
4
|
+
|
5
|
+
以下の例では、javascriptで`<img>`要素から分割した`<img>`要素を動的に生成します。
|
2
6
|
|
3
7
|
|
4
8
|
|
2
追記:補足
test
CHANGED
@@ -67,3 +67,9 @@
|
|
67
67
|
}
|
68
68
|
|
69
69
|
```
|
70
|
+
|
71
|
+
|
72
|
+
|
73
|
+
補足:stackoverflow上でもsprite、tileなどで検索するとjsを使わずcssを使用した例などの回答も見つけられましたが、質問にピンポイントなライブラリは見つかりませんでした。
|
74
|
+
|
75
|
+
`EaselJS`や`enchant.js`などのSpriteが回答に近いですが、これはゲーム用に最適化されていて、動的に画像を作る機能がメソッドとして用意されていないように見えました。また両者とも、`<canvas>`を使うことが前提です。
|
1
変更:デモを余白なしに
test
CHANGED
@@ -2,7 +2,9 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
-
[DEMO](https://jsfiddle.net/59naga/oe6ht2rs/)
|
5
|
+
[余白なしDEMO](https://jsfiddle.net/59naga/oe6ht2rs/2/)
|
6
|
+
|
7
|
+
|
6
8
|
|
7
9
|
![イメージ説明](3278935112b571957f143cc91fc986f3.png)
|
8
10
|
|