javascript - 如何在<div>标签中添加raphaeljs对象

$(document).ready(function(){
    $("#btnAO").live("click", function(){
        $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
            $("#id1").append(new Raphael(document.getElementById('canvasdiv'), 900, 600).rect(30, 50, 80, 100).attr({
                fill : "blue",
                stroke : "black",
                strokeWidth : 0,
                r : 5
        }));
    });
});

我已经尝试过在其中添加Raphael对象，但不会在屏幕上显示

最佳答案

Raphael将您作为第一个参数提供给容器。返回值是用于渲染的Raphael纸张对象。简而言之，只要剪掉$("#id1").append，它就会显示出来。

$(document).ready(function(){
    $("#btnAO").live("click", function(){
        $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>");
        var paper = new Raphael(document.getElementById('canvasdiv'), 900, 600);
        paper.rect(30, 50, 80, 100).attr({
            fill : "blue",
            stroke : "black",
            strokeWidth : 0,
            r : 5
        });
    });
});

此外，由于无论如何都使用jQuery，因此您可能需要用document.getElementById('canvasdiv')替换$('#canvasdiv').get(0)以获得一致性。