如何使用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畫布繪製甜甜圈

回答

相關問題