画布轴线厚度不断增加答案

【问题标题】：Thickness of canvas axis line is increasing画布轴线厚度不断增加
【发布时间】：2015-08-08 11:43:25
【问题描述】：

我正在使用html5画布将svg（条形图）转换为画布，然后转换为图像。但是在转换x轴和y轴的粗细时正在增加。

这是我的代码

var html = d3.select(
                    '#div2 #' + $scope.selectedoption + ' svg')
                    .attr("version", 1.1).attr("xmlns",
                            "http://www.w3.org/2000/svg")
                    .node().parentNode.innerHTML;

            // d3.select("#mycanvas").style("display", "none");

            var canvasval = document.getElementById('mycanvas');

            if (canvasval != null)
                document.getElementById('mycanvas').remove();


            var newcanvas = document.createElement('canvas');
            newcanvas.setAttribute('id', "mycanvas");
            newcanvas.setAttribute('width', "900");
            newcanvas.setAttribute('height', "900");



            var olddiv = document.getElementById('drawcanvas');
            olddiv.appendChild(newcanvas);

            // console.log(document.getElementById('mycanvas'))
            var canvas = document.getElementById("mycanvas"), context = canvas
                    .getContext("2d");


            // build the query selector for the desired canvas



            context.lineWidth = 0.0;


            var DOMURL = window.URL;

            var img = new Image();
            var svg = new Blob([ html ], {
                type : 'image/svg+xml;base64;charset=UTF-8;'
            });
            var url = DOMURL.createObjectURL(svg);

            img.onload = function() {
                context.drawImage(img, 0,0);
                DOMURL.revokeObjectURL(url);
            }

            img.src = url;
            img.Timeout=0;

            var flag = 0;

            /*
             * var olddiv =
             * document.getElementById('drawcanvas');
             * olddiv.appendChild(newcanvas);
             */

            // $scope.hidevalue=false;
        }
        html2canvas(
                document.getElementById(canvaseleid),
                {
                    onrendered : function(canvas) {
                        var imgData = canvas
                                .toDataURL('image/png');

                        var a = document.createElement("a");
                        a.download = "rept.png";
                        a.href = imgData;
})

我无法弄清楚它的原因。我也尝试设置了几个 css 属性。

谢谢

【问题讨论】：

标签： html5-canvas html2canvas c3

【解决方案1】：

您需要将轴的填充设置为透明（您看到的粗线实际上是填充）。您需要添加笔触颜色（以显示线条）

您必须在内联 CSS 中执行此操作 - 您可以使用 d3 添加这些样式，就像这样（在 SVG 中绘制图表之后，在调用 html2canvas 之前）

d3.selectAll(".domain")
    .style("stroke", "black")
    .style("fill", "transparent");

【讨论】：