캔버스를 svg로 어떻게 바꿀 수 있습니까?

Question

function BallItemRenderer() { 
    this.canvas = null; 
    this.graphics = this.canvas.getContext("2d"); 
this.stroke; 
this.fill; 
this.cubeDepth = 0; 
this.cubeAngleRatio = 0; 

this.draw = function(x, y, width, height) { 
     var g = this.graphics; 
     if(g) { 
      if(this.stroke && this.stroke.color) 
       g.strokeStyle = GraphicsUtils.color2rgba(this.stroke.color, this.stroke.alpha); 

      if(this.stroke && this.stroke.weight) 
       g.lineWidth = this.stroke.weight; 
      else 
       g.lineWidth = 1; 

      var rad = width * 0.5; 
      var tx = this.cubeAngleRatio * rad * 0.5; 
      var radgrad = g.createRadialGradient(x+rad-tx, y+rad-tx, 1, x+rad, y+rad, rad); 
      var alpha = isObject(this.fill) ? this.fill.alpha : 1; 
      radgrad.addColorStop(0, "rgba(255,255,255," + alpha + ")"); 
      radgrad.addColorStop(1, GraphicsUtils.adjustBrightness(this.fill, 0)); 
      g.fillStyle = radgrad; 
      g.beginPath(); 

      g.arc(x+rad, y+rad, rad, 0, Math.PI*2, true); 
      g.fill(); 
      if(this.stroke && this.stroke.weight) 
       g.stroke(); 
     } 
    } 
} 

저는 캔버스를 변경하려고합니다. 그러나 그것은 나에게 그렇게 어렵다. 해당 소스는 항목 렌더링에 사용됩니다. 캔버스를 svg로 어떻게 바꿀 수 있습니까? 필요 샘플 .. .. 도와주세요

Answer 1

사용 a circle element (example)와 a radialGradient element (example). 적절한 요소를 만들고 조작하려면 DOM을 사용해야합니다.