将元素添加到现有Canvas

Question

我有this canvas，我正在使用ChartJs，并希望将图例合并到图形画布。

请参阅我的代码：

＆＃13;

＆＃13;

var radarChartData = {
		labels: ["Item1", "Item2", "Item3", "Item4"],
    
    datasets: [
			{
				label: "Linha1",
				fillColor: "rgba(220,220,220,0)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [2,2,2,2]
			},
			{
				label: "Linha2",
				fillColor: "rgba(151,187,205,0)",
				strokeColor: "rgba(151,187,205,1)",
				pointColor: "rgba(151,187,205,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [8,8,8,8]
			}
		]
	};

	window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            responsive: true,
        //scaleShowLabels : true,
        animationSteps: 80,
        animationEasing: "easeOutQuart",
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 1,
        scaleStartValue: 0,
        angleShowLineOut : false,
        scaleLineColor: "rgba(0, 0, 0, 1)",
        
        legendTemplate : '<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<h3 style=\"color:<%=datasets[i].strokeColor%>\">.'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% }%>'
                +'<% } %></h3>',
        
        //Number - Pixel width of the angle line
    angleLineWidth : 100,

    //String - Point label font declaration
    pointLabelFontFamily : "Arial",

    //String - Point label font weight
    pointLabelFontStyle : "normal",

    //Number - Point label font size in pixels
    pointLabelFontSize : 20,

    //String - Point label font colour
    pointLabelFontColor : "black",
         // String - Template string for single tooltips
            tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>",
            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= datasetLabel %> : <%= value %>",
        });

document.getElementById("legendDiv").innerHTML = window.myRadar.generateLegend();

＆＃13;

#canvas-container {
        width: 100%;
        text-align: center;
    }

    canvas {
        display: inline;
    }

＆＃13;

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="canvas-container">
            <canvas id="canvas"></canvas>
        </div>
<div id="legendDiv"></div>

＆＃13;

＆＃13;

＆＃13;

我目前正在div进入传奇。有没有办法将其插入canvas？
我希望图表中的图例都是单个canvas的一部分。
有谁可以帮助我？

Answer 1

我成功解决了this fiddle中的问题。
我使用html2canvas生成了一个新画布。
代码：

＆＃13;

＆＃13;

$("#newCanvas").click(function () {
    var $conteudo = $("#canvas-container");
    html2canvas($conteudo[0], {
        onrendered: function (canvas) {
            $('#canvas-container').after(canvas);
            var base64 = canvas.toDataURL('image/jpeg');
            console.log(base64);
        },
        logging: true
    });
});

var radarChartData = {
		labels: ["Item1", "Item2", "Item3", "Item4"],
    
    datasets: [
			{
				label: "Linha1",
				fillColor: "rgba(220,220,220,0)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [2,2,2,2]
			},
			{
				label: "Linha2",
				fillColor: "rgba(151,187,205,0)",
				strokeColor: "rgba(151,187,205,1)",
				pointColor: "rgba(151,187,205,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [8,8,8,8]
			}
		]
	};

	window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
            responsive: true,
        //scaleShowLabels : true,
        animationSteps: 80,
        animationEasing: "easeOutQuart",
        scaleOverride: true,
        scaleSteps: 10,
        scaleStepWidth: 1,
        scaleStartValue: 0,
        angleShowLineOut : false,
        scaleLineColor: "rgba(0, 0, 0, 1)",
        
        legendTemplate : '<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<h3 style=\"color:<%=datasets[i].strokeColor%>\">.'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% }%>'
                +'<% } %></h3>',
        
        //Number - Pixel width of the angle line
    angleLineWidth : 100,

    //String - Point label font declaration
    pointLabelFontFamily : "Arial",

    //String - Point label font weight
    pointLabelFontStyle : "normal",

    //Number - Point label font size in pixels
    pointLabelFontSize : 20,

    //String - Point label font colour
    pointLabelFontColor : "black",
         // String - Template string for single tooltips
            tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value %>",
            // String - Template string for multiple tooltips
            multiTooltipTemplate: "<%= datasetLabel %> : <%= value %>",
        });

document.getElementById("legendDiv").innerHTML = window.myRadar.generateLegend();

＆＃13;

#canvas-container {
        width: 100%;
        border: 2px solid #8AC007;
        background-color: white;
    }

    canvas {
        display: inline;
        background-color: white;
    }

    #legendDiv {
        text-align: left;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div id="canvas-container">
    <canvas id="canvas"></canvas>
    <div id="legendDiv"></div>
</div>
<br/>
<input id="newCanvas" type="button" value="New Canvas Now!"></input>

＆＃13;

＆＃13;

＆＃13;