使用javascript或jquery在圖像中添加動態形狀

Question

我想使用jQuery插件或JavaScript在圖像中添加動態形狀，例如圓形，矩形，直線，橢圓形等。 例如：

在此圖像中，可以通過在文本框中寫入一些內容來創建動態文本，這種類型我想要添加形狀

我在不同的軟件網站上進行了研究，但沒有發現適當的結果。 請給我一些解決該問題的提示。

對於演示，您可以參考以下鏈接

http://www.printo.in => http://www.printo.in/translucent-cards-single-side-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>