javascript - HTML5キャンバスでドーナツを描く方法

Question

HTML5のキャンバス内にドーナツを描きたいのですが、キャンバスの背景色が単色なら描けました。でもグラデーションカラーなので描けません。

キャンバスの背景色がグラデーションカラーの場合のドーナツの描き方を教えてください。

お気に入り：

ソース

これは私のコードです:

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. キャンバスの背景色が単色の場合:

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();

2. キャンバスの背景色がグラデーションカラーの場合：

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();

これは効果図です。(少し曲がっています、--!):