javascript - html canvas - 放大圆环图上的笔划宽度

Question

我跟着一个jsfiddle:http://jsfiddle.net/RgLAU/1/

并制作了一个圆环图。现在， donut chart 有非常小的白色笔划，将 donut 的每个部分分开。例如，在下图中，您可以(几乎)看到 donut 有 6 个部分，由白色笔划划定。



我的问题是我想在不增加图表整体厚度的情况下增加这些线条的粗细，这样中断看起来更像这样:



这是我的 JS。非常感谢任何帮助。:

var donutVm = this;

donutVm.donutHeight = donutVm.donutHeightConfig || 150;
donutVm.donutWidth = donutVm.donutWidthConfig || 150;
donutVm.donutRadius = donutVm.donutRadiusConfig || 50;

if (CommunityConfig.conversionContestActionId) {
    ActionService.get({ id: CommunityConfig.conversionContestActionId, type: 'action' }).$promise.then(function (response) {
        if (CommunityConfig.conversionContestConversionCountTarget) donutVm.totalConversions = CommunityConfig.conversionContestConversionCountTarget;
        var action = response;
        if (action.linkReference) {
            action.getContextFromLinkReference(action.linkReference, function (error, context) {
                var conversionsMade = context.conversionCount;

                var canvas  = document.getElementById("chart");
                var chart = canvas.getContext("2d");

                function drawDonutChart(canvas)
                {
                    donutVm.x, donutVm.y, donutVm.radius, donutVm.lineWidth, donutVm.strokeStyle, donutVm.from, donutVm.to = null;
                    donutVm.set = function( x, y, radius, from, to, lineWidth, strokeStyle) {
                        donutVm.x = x;
                        donutVm.y = y;
                        donutVm.radius = radius;
                        donutVm.from = from;
                        donutVm.to = to;
                        donutVm.lineWidth = lineWidth;
                        donutVm.strokeStyle = strokeStyle;
                    };

                    donutVm.draw = function(data) {
                        canvas.beginPath();
                        canvas.lineWidth = donutVm.lineWidth;
                        canvas.strokeStyle = donutVm.strokeStyle;
                        canvas.arc(donutVm.x, donutVm.y, donutVm.radius, donutVm.from, donutVm.to);
                        canvas.stroke();
                        var numberOfParts = data.numberOfParts;
                        var parts = data.parts.pt;
                        var colors = data.colors.cs;
                        var df = 1.5 * Math.PI;

                        for(var i = 0; i < numberOfParts; i++) {
                            canvas.beginPath();
                            canvas.strokeStyle = colors[i];
                            canvas.arc(donutVm.x, donutVm.y, donutVm.radius, df, df + (Math.PI * 2) * (parts[i] / 100));
                            canvas.stroke();
                            df += (Math.PI * 2) * (parts[i] / 100);
                        }
                    }
                }

                var sections = {"pt": []};
                var sectionColors = {"cs": []};
                var emptyColor = "lightgrey";
                var madeColor = CommunityConfig.styles.buttonColor;
                var sectionPercentage = 100/donutVm.totalConversions;

                if (conversionsMade == donutVm.totalConversions) {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(emptyColor);
                    }
                } else {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(madeColor);
                    }

                    while (sectionColors.cs.length < donutVm.totalConversions) {
                        sectionColors.cs.push(emptyColor);
                    }
                }

                for (var i = 0; i < donutVm.totalConversions; i++){
                    sections.pt.push(sectionPercentage);
                }

                var data = {
                    numberOfParts: donutVm.totalConversions,
                    parts: sections,
                    colors: sectionColors
                };

                var drawDonut = new drawDonutChart(chart);
                donutVm.set(canvas.width / 2, canvas.height / 2, donutVm.donutRadius, 0, Math.PI*2, 10, "#fff");
                donutVm.draw(data);
                donutVm.donutFinished = true;

Answer 1

这样的事情应该工作:

var donutVm = this;

donutVm.donutHeight = donutVm.donutHeightConfig || 150;
donutVm.donutWidth = donutVm.donutWidthConfig || 150;
donutVm.donutRadius = donutVm.donutRadiusConfig || 50;

if (CommunityConfig.conversionContestActionId) {
    ActionService.get({ id: CommunityConfig.conversionContestActionId, type: 'action' }).$promise.then(function (response) {
        if (CommunityConfig.conversionContestConversionCountTarget) donutVm.totalConversions = CommunityConfig.conversionContestConversionCountTarget;
        var action = response;
        if (action.linkReference) {
            action.getContextFromLinkReference(action.linkReference, function (error, context) {
                var conversionsMade = context.conversionCount;

                var canvas  = document.getElementById("chart");
                var chart = canvas.getContext("2d");

                function drawDonutChart(canvas)
                {
                    donutVm.x, donutVm.y, donutVm.radius, donutVm.lineWidth, donutVm.strokeStyle, donutVm.from, donutVm.to = null;
                    donutVm.set = function( x, y, radius, from, to, lineWidth, strokeStyle) {
                        donutVm.x = x;
                        donutVm.y = y;
                        donutVm.radius = radius;
                        donutVm.from = from;
                        donutVm.to = to;
                        donutVm.lineWidth = lineWidth;
                        donutVm.strokeStyle = strokeStyle;
                    };

                    donutVm.draw = function(data) {
                        canvas.beginPath();
                        canvas.lineWidth = donutVm.lineWidth;
                        canvas.strokeStyle = donutVm.strokeStyle;
                        canvas.arc(donutVm.x, donutVm.y, donutVm.radius, donutVm.from, donutVm.to);
                        canvas.stroke();
                        var numberOfParts = data.numberOfParts;
                        var parts = data.parts.pt;
                        var colors = data.colors.cs;
                        var spacer = 2 * 0.05
                        var df = (1.5 + spacer) * Math.PI;

                        for(var i = 0; i < numberOfParts; i++) {
                            canvas.beginPath();
                            canvas.strokeStyle = colors[i];
                            canvas.arc(donutVm.x, donutVm.y, donutVm.radius, df, df + (Math.PI * 2) * (parts[i] / 100) - (2 * spacer);
                            canvas.stroke();
                            df += (Math.PI * 2) * ((parts[i] / 100) + (2 * spacer));
                        }
                    }
                }

                var sections = {"pt": []};
                var sectionColors = {"cs": []};
                var emptyColor = "lightgrey";
                var madeColor = CommunityConfig.styles.buttonColor;
                var sectionPercentage = 100/donutVm.totalConversions;

                if (conversionsMade == donutVm.totalConversions) {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(emptyColor);
                    }
                } else {
                    for (var y = 0; y < conversionsMade; y++) {
                        sectionColors.cs.push(madeColor);
                    }

                    while (sectionColors.cs.length < donutVm.totalConversions) {
                        sectionColors.cs.push(emptyColor);
                    }
                }

                for (var i = 0; i < donutVm.totalConversions; i++){
                    sections.pt.push(sectionPercentage);
                }

                var data = {
                    numberOfParts: donutVm.totalConversions,
                    parts: sections,
                    colors: sectionColors
                };

                var drawDonut = new drawDonutChart(chart);
                donutVm.set(canvas.width / 2, canvas.height / 2, donutVm.donutRadius, 0, Math.PI*2, 10, "#fff");
                donutVm.draw(data);
                donutVm.donutFinished = true;