如何将画布更改为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。但对我来说太难了。 该源适用于项目渲染。 如何将画布更改为svg？ 请帮助.. 需要样品..

Answer 1

使用a circle element（example）和a radialGradient element（example）。您需要使用DOM来创建和操作适当的元素。