キャンバスオブジェクトをjsonとして保存します

Question

以下のようなキャンバスオブジェクトをシリアル化するにはどうすればよいですか？それは手続きキャンバスのコンテキストとの対話だから

  context.beginPath(); 
      context.rect(188, 50, 200, 100); 
      context.fillStyle = 'yellow'; 
      context.fill(); 
      context.lineWidth = 7; 
      context.strokeStyle = 'black'; 
      context.stroke(); 

私はそれが可能だとは思わない（右の用語は？ということです）。しかし、私はこのようなオブジェクトを保存して、それらを操作する方が簡単になるようにしたいと考えています。

私は上記のような2つのアイテムを作成することができますが、x、yの開始位置を変更するにはどうすればいいですか？私が考えることができるのはevalですが、キャンバス上での描画をひどく遅くすることはわかっています。

Answer 1

元の座標を使用していない状態で図面の位置を変更したい場合は、context.translateを使用して、キャンバス[0,0]の原点をキャンバス上の任意の位置に移動してください。

function draw(offsetX,offsetY){ 
    // translate the [0,0] origin of the canvas to [offsetX,offsetY] 
    context.translate(offsetX,offsetY); 

    // draw the original rectangle (no changes are required to any coordinates 
    context.beginPath(); 
    context.rect(188, 50, 200, 100); 
    context.fillStyle = 'yellow'; 
    context.fill(); 
    context.lineWidth = 7; 
    context.strokeStyle = 'black'; 
    context.stroke(); 

    // always clean up! Reverse the translation 
    context.translate(-offsetX,-offsetY); 
} 

元のキャンバスコマンドを別のデバイスに送信する場合は、コンテキスト描画コマンドをシリアル化する必要があります。キャンバスの描画コマンドを文字列に保存する方法を示すQ&Aを参照してください。その文字列は他の場所（AJAXまたはウェブソケットを使用しているf.ex）に送信でき、受信側のデバイスはコマンドを「再生」できます。

Answer 2

context.getImageData()は、探している機能です。キャンバス上のデータからImageDataオブジェクトを返します（MDN）。

ImageData ctx.getImageData(sx, sy, sw, sh); 

をですから、キャンバスからのデータを保存し、シリアライズしたい場合は、次のコードを使用します：それは構文は次のようになります

var data = context.getImageData(0, 0, context.canvas.width, context.canvas.height).data; 

今ImageDataオブジェクト上.dataプロパティ基本的にキャンバスのすべての色の大きなリストであるUint8ClampedArrayです。しかし、それをシリアル化することを選択することは重要ではありません。

---

シリアル化されたキャンバス「メッセージ」の1つを受け取ってキャンバスに戻したいとします。いいえ問題は、あなたが必要とするすべては context.putImageData()ありません：

context.putImageData(message.data, 0, 0); 

これが第二1上に最初のキャンバスからのデータを「ペースト」します。

Good Luck！