javascriptまたはjqueryを使用して画像に動的な図形を追加

Question

jqueryプラグインまたはjavascriptを使用して、画像に円、矩形、線、楕円などの動的な図形を追加したいとします。例の場合：このイメージで

ダイナミックテキストはややテキストボックスに書き込みによって、私は形状

を追加するために、私は別のソフトウェアのウェブサイトでそれを研究していたがそこたく同じのこのタイプを作成することができます適切な結果が来ていると指摘している。この問題を解決するためのヒントを教えてください。デモの

あなたはおかげで

http://www.printo.in =>http://www.printo.in/translucent-cards-single-sided-translucent-card-ss-blank-4552

http://www.vistaprint.in =>http://www.vistaprint.in/studio.aspx?template=471103%7es1_AHT_023&ag=True

アドバンス次のリンクを参照することができます。

Answer 1

HTML5 <canvas></canvas>要素を使用します。

<canvas id="myCanvas" width="578" height="200"></canvas> 
    <script> 
     var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 70; 

     context.beginPath(); 
     context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 

     //On mouse events on the canvas 
     $canvas.mousedown(function(e) { 
     lastEvent = e; 
     mousedown = true; 
     }).mousemove(function(e) { 
     //Draw lines 
     if(mousedown) { 
     ctx.beginPath(); 
     ctx.moveTo(lastEvent.offsetX, lastEvent.offsetY); 
     ctx.lineTo(e.offsetX, e.offsetY); 
     ctx.strokeStyle = color; 
     ctx.stroke(); 
     lastEvent = e; 
     } 
    }).mouseup(function() { 
     mousedown = false; 
    }).mouseleave(function() { 
     $canvas.mouseup(); 
    }); 

    </script>