canvas - 如何将画布更改为 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

使用一个circle元素（示例）和一个radialGradient元素（示例）。您需要使用 DOM 来创建和操作适当的元素。