Wie ein Rohr oder ein Rohr als vertikale Balkendiagramme in html5 canavs

Question

Eine einfache Balkendiagramm wie folgt bilden:

Wie zeichnen I Rohre oder Rohre, die die grauen Balken in dem Balkendiagramm oben zu ersetzen ? Die Rohre aussehen könnte, sehr ähnlich dem Rohr Bild unten:

Insbesondere ich brauche definieren Kanten oder Ränder haben (wie die, die in dem Rohr Bild), aber ich würde auch müssen sie Transparenz aufweisen, und vielleicht Licht- oder Schatteneffekte an der Vorderseite, um zu zeigen, dass das Rohr hohl ist.

Answer 1

Sie können den erhöhten Balken mit einfachen rechteckigen Füllungen, Strichen & Schatten erhalten.

• Außengrenze: ein helleres Grau
• Raised Seitenrand: eine dunklere Version Ihrer gewünschten Farbton
• Innen Schatten: ein dunkleres Grau
• Innen füllen: eine leichtere Version Ihres Wunsches Farbton

Und fügen Sie einen schwarzen context.fillRect als Wert Indikator für den Balken.

Beispielcode und eine Demo:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
ctx.fillStyle='lightgray'; 
 
ctx.fillRect(0,0,cw,ch); 
 

 
bar(50,50,25,200,'rgb(106,126,152)','rgb(176,196,222)',4); 
 

 
function bar(x,y,width,height,bordercolor,insidecolor,borderwidth){ 
 
    // outside border 
 
    ctx.beginPath() 
 
    ctx.fillStyle='rgb(180,180,180)'; 
 
    ctx.rect(x-2,y-2,width+4,height+4); 
 
    ctx.fill(); 
 
    // inside border & inside fill & shadow 
 
    ctx.save(); 
 
    ctx.beginPath() 
 
    ctx.fillStyle=insidecolor; 
 
    ctx.strokeStyle=insidecolor; 
 
    ctx.lineWidth=borderwidth; 
 
    ctx.rect(x,y,width,height); 
 
    ctx.fill(); 
 
    ctx.clip(); 
 
    ctx.shadowColor='rgb(50,50,50)'; 
 
    ctx.shadowBlur=6; 
 
    ctx.stroke(); 
 
    ctx.restore(); 
 
}

body{ background-color:ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>