6

I would like to draw doughnut within HTML5 canvas.If the background color of the canvas is a solid color, I was able to draw it. But it's gradient color, I can't draw it.

I would like to know how to draw the doughnut, when the backgroud color of the canvas is gradient color.

Like:

Example of d.chart

Source

This is my code:

function background(context, coordinate, properties) {
  var x = coordinate.x //起始点x
  , y = coordinate.y //起始点 y
  , w = coordinate.w //宽度(终点-起始点之间的宽度)
  , h = coordinate.h //高度(终点-起始点之间的高度)
  , gradientFactor, gradientColor; //渐变因子, 渐变色

  context.save();
  switch( properties["background-fill-type"] ) {
     case "solid":
       context.fillStyle = properties["background-color"];
       break;
     case "gradient":
       gradientFactor = properties["background-gradient-factor"];
       gradientColor = context.createLinearGradient(x, y, x + w, y);
       gradientColor.addColorStop(gradientFactor, properties["background-first-color"]);
       gradientColor.addColorStop(1 - gradientFactor, properties["background-second-color"]);
       context.fillStyle = gradientColor;
       break;
     case "image":
       break;
   }
   context.fillRect(x, y, w, h);
   context.restore();
}
  1. If the background color of the canvas is solid color:
var context = canvas.getContext("2d")
  , properties = {
     "background-fill-type": "solid", //solid color
     "background-color": "#FFFFFF",
     "background-first-color": "#008B8B",
     "background-second-color": "#F5DEB3",
     "background-gradient-factor": 0.5,
     "border-color": "#FFFFFF",
     "border-thickness": 0
};

//draw canvas background (solid color)
background(context, {
     x: 0,
     y: 0,
     w: properties["width"],
     h: properties["height"]
}, properties);

//draw doughnut
context.save();
context.beginPath();
context.translate(centerX, centerY);
context.arc(0, 0, Radius, 0, dpi, false); //外部圆
context.fillStyle = "blue";
context.fill();    
context.closePath();

context.beginPath();
context.arc(0, 0, radius, 0, dpi, false); //内部圆
context.fillStyle = properties["background-color"];
context.fill();
context.closePath();
context.restore();
  1. If the background color of the canvas is gradient color:
var context = canvas.getContext("2d")
   , properties = {
         "background-fill-type": "gradient", //gradient color
         "background-color": "#FFFFFF",
         "background-first-color": "#008B8B",
         "background-second-color": "#F5DEB3",
         "background-gradient-factor": 0.5,
         "border-color": "#FFFFFF",
         "border-thickness": 0
   };

     //draw canvas background (gradient color)
     background(context, {
         x: 0,
         y: 0,
         w: properties["width"],
         h: properties["height"]
     }, properties);

    //draw doughnut
    context.save();
    context.beginPath();
    context.translate(centerX, centerY);
    context.arc(0, 0, Radius, 0, dpi, false); //外部圆
    context.fillStyle = "blue";
    context.fill();    
    context.closePath();

    context.beginPath();
    context.arc(0, 0, radius, 0, dpi, false); //内部圆
    //context.fillStyle = properties["background-color"];
    // *----------------------------------------------------------------------*
    // | How to solve internal circle and canvas background color consistent? |
    // | 
    // *----------------------------------------------------------------------*
    context.fill();
    context.closePath();
    context.restore();

This is an effect diagram.( A little crooked, - -! ):

enter image description here

2
  • what exactly do you mean with you "can't draw it"? What happens when you try? Also, please post the code which does the drawing.
    – Philipp
    Apr 9, 2013 at 11:47
  • I forgot to put the code. I'm sorry.
    – Kinematic
    Apr 10, 2013 at 1:32

1 Answer 1

6

Drawing a data-donut with gradient background

enter image description here

Your donut is just a circle with the center cut out.

So draw an outer circle and then draw an inner circle to cut a donut.

To display data, the outer circle can be assembled from arcs whose sweeps indicate your data ( called wedges).

You can draw individual wedges by supplying the starting and ending angles of an arc (in radians).

    ctx.arc(cX, cY, radius, startRadians, endRadians, false);

Fill both the canvas and the inner circle with your same gradient to display a consistent gradient.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ENZD9/

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style>
        body{ background-color: ivory; }
        canvas{border:1px solid red;}
    </style>

    <script>
    $(function(){

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

        // define the donut
        var cX = Math.floor(canvas.width / 2);
        var cY = Math.floor(canvas.height / 2);
        var radius = Math.min(cX,cY)*.75;

        // the datapoints
        var data=[];
        data.push(67.34);
        data.push(28.60);
        data.push(1.78);
        data.push(.84);
        data.push(.74);
        data.push(.70);

        // colors to use for each datapoint
        var colors=[];
        colors.push("teal");
        colors.push("rgb(165,42,42)");
        colors.push("purple");
        colors.push("green");
        colors.push("cyan");
        colors.push("gold");

        // track the accumulated arcs drawn so far
        var totalArc=0;

        // draw a wedge
        function drawWedge2(percent, color) {
            // calc size of our wedge in radians
            var WedgeInRadians=percent/100*360 *Math.PI/180;
            // draw the wedge
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(cX, cY);
            ctx.arc(cX, cY, radius, totalArc, totalArc+WedgeInRadians, false);
            ctx.closePath();
            ctx.fillStyle = color;
            ctx.fill();
            ctx.restore();
            // sum the size of all wedges so far
            // We will begin our next wedge at this sum
            totalArc+=WedgeInRadians;
        }

        // draw the donut one wedge at a time
        function drawDonut(){
            for(var i=0;i<data.length;i++){
                drawWedge2(data[i],colors[i]);
            }
            // cut out an inner-circle == donut
            ctx.beginPath();
            ctx.moveTo(cX,cY); 
            ctx.fillStyle=gradient;
            ctx.arc(cX, cY, radius*.60, 0, 2 * Math.PI, false);
            ctx.fill(); 
        }

        // draw the background gradient
        var gradient = ctx.createLinearGradient(0,0,canvas.width,0);
        gradient.addColorStop(0, "#008B8B");
        gradient.addColorStop(0.75, "#F5DEB3");
        ctx.fillStyle = gradient;
        ctx.fillRect(0,0,canvas.width,canvas.height);

        // draw the donut
        drawDonut();

    }); // end $(function(){});
    </script>

    </head>

    <body>
        <canvas id="canvas" width=400 height=300></canvas>
    </body>
    </html>
1
  • I see. The circle center has not changed, gradient colors will not be misplaced. I will add the link and your name in my code. Thanks very much..
    – Kinematic
    Apr 10, 2013 at 6:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.