如何使用HTML5画布绘制甜甜圈

我想在HTML5画布中绘制甜甜圈。如果画布的背景颜色是纯色，我可以绘制它。但它是渐变色，我无法绘制它。如何使用HTML5画布绘制甜甜圈

我想知道如何绘制甜甜圈，当画布的背景颜色是渐变色时。

像：

Example of d.chart

这是我的代码：

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

如果画布的背景颜色是纯色：

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

如果画布的背景颜色是渐变色：

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

这是一种效果图（A小歪， - - ！）：

enter image description here

来源

2013-04-09 Kinematic

究竟你的意思是你“不能得出它”？当你尝试时会发生什么？另外，请张贴绘图的代码。 – Philipp 2013-04-09 11:47:02

我忘了把代码。对不起。 – Kinematic 2013-04-10 01:32:15

绘制数据甜甜圈梯度背景

enter image description here

你的甜甜圈只是与中心的圆切出。

因此画出一个外圈，然后画一个内圈来切一个甜甜圈。

要显示数据，可以从扫描显示数据（称为楔形）的圆弧组装外圆。

您可以通过提供圆弧的起始角度和结束角度（弧度）来绘制单个楔子。

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

用相同的渐变填充画布和内部圆以显示一致的渐变。

这里是代码和一个小提琴：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>

来源

2013-04-09 17:04:49 markE

我明白了。圆心没有改变，渐变色不会错位。我将在我的代码中添加链接和你的名字。非常感谢 .. – Kinematic 2013-04-10 06:27:39

如何使用HTML5画布绘制甜甜圈

回答

相关问题