在javascript中设置图像而不是彩弹

Question

我想设置一个图像而不是画球

我的代码如下

  ballPainter = {
      BALL_FILL_STYLE: 'rgb(255,0,50)',
      BALL_STROKE_STYLE: 'rgb()',

      paint: function (ball, context) { 
         var imageObj = new Image();

         context.save();

         context.shadowColor = undefined;
         context.lineWidth = 2;
         context.fillStyle = this.BALL_FILL_STYLE;
         context.strokeStyle = this.BALL_STROKE_STYLE;

         context.beginPath();
         context.arc(ball.left, ball.top,
                     ball.radius, -1, Math.PI*2, false);

         context.clip();
         context.fill();
         context.stroke();
         context.restore();
      }
    },

Answer 1

你可能想检查一下 http://www.w3schools.com/tags/canvas_drawimage.asp

我不确定你是否可以将图像裁剪成cricle（可能是图像有透明的背景）

*显然您可以HTML5 Canvas - Fill circle with image

编辑