如何在html5 canavs中制作管或管作为垂直条形图

Question

这样的简单条形图：

如何绘制管道或管道以替换上方条形图中的灰色条形图？管道看起来与下面的管道图像非常相似：

具体来说，我需要定义边缘或边界（如管道图像中的那个），但我还需要它在前面有透明度，可能还有灯光或阴影效果，以显示管道是空心的。

Answer 1

您可以使用简单的矩形填充，笔触和放大来获得凸起的侧边栏。阴影。

• 外边界：浅灰色
• 凸起的边框：您所需色调的深色版本
• 内部阴影：深灰色
• 内部填充：您希望色调的较轻版本

并添加黑色context.fillRect作为条形图的值指示符。

示例代码和演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;