如何将画布更改为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来创建和操作适当的元素。