canvas.toDataURLメソッドで、contextの現状態をdataURIで取得できます。
結合用の新しいcanvasを作成し、取得したdataURIをcanvas.drawImageで結合できます。
下記コードはcontext1,context2,context3にそれぞれテキストを描写し、context4に結合します。
DEMO
javascript
1var createImage= function(context){
2 var image= new Image
3 image.src= context.canvas.toDataURL()
4 return image
5}
6
7var context1= document.createElement('canvas').getContext('2d')
8context1.fillText('foo',0,10)
9
10var context2= document.createElement('canvas').getContext('2d')
11context2.fillText('bar',0,20)
12
13var context3= document.createElement('canvas').getContext('2d')
14context3.fillText('baz',0,30)
15
16var context4= document.createElement('canvas').getContext('2d')
17context4.drawImage(createImage(context1),0,0)
18context4.drawImage(createImage(context2),0,0)
19context4.drawImage(createImage(context3),0,0)
20
21document.body.appendChild(createImage(context4))
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/22 20:27