回答編集履歴

3

追記:コードに対する「監督コメント」

2015/11/09 23:49

投稿

horse_n_deer
horse_n_deer

スコア452

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

追記:補足

2015/11/09 23:49

投稿

horse_n_deer
horse_n_deer

スコア452

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

変更:デモを余白なしに

2015/11/09 23:47

投稿

horse_n_deer
horse_n_deer

スコア452

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