Javascript 如何在html5 canavs中将管状体制作为垂直条形图

下面是一个简单的条形图：

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

---

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

您可以使用简单的矩形填充、笔划和阴影来获得凸起的侧栏

• 外边框：浅灰色
• 凸起的侧边边框：所需色调的较暗版本
• 内部阴影：深灰色
• 内部填充：你的欲望色调的较轻版本

并添加一个黑色的

context.fillRect

作为条形图的值指示器

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
ctx.fillStyle='lightgray'；
ctx.fillRect（0,0，cw，ch）；
巴(50,50,25200),"rgb(106126152),"rgb(176196222),4";；
功能栏（x、y、宽度、高度、边框颜色、内部颜色、边框宽度）{
//境外
ctx.beginPath（）
ctx.fillStyle='rgb（180180）'；
ctx.rect（x-2，y-2，宽度+4，高度+4）；
ctx.fill（）；
//内边框、内填充和阴影
ctx.save（）；
ctx.beginPath（）
ctx.fillStyle=内部颜色；
ctx.strokeStyle=内部颜色；
ctx.线宽=边框宽度；
ctx.rect（x，y，宽度，高度）；
ctx.fill（）；
ctx.clip（）；
ctx.shadowColor='rgb（50,50,50）'；
ctx.shadowBlur=6；
ctx.stroke（）；
ctx.restore（）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}

---

SVG当然，您需要绘制2个形状，并沿其路径在0%到100%之间设置内部形状的动画！有没有办法把上面的部分剪掉，让它看起来像是有一个开口？@junerockwell当然有。只需使用

context.clearRect

剪掉条的顶部即可。clearRect（）可以工作。谢谢还有一件事，有没有办法让外矩形看起来像玻璃？玻璃是看不见的：-p。。。但玻璃通常由几乎透明的白色覆盖层表示，而不是覆盖整个底层。可能是一个带有

fillStyle=rgba（255255255,0.15）

和

x=BarX barWidth*2

和

y=BarY BarHeight/2.5

和

radius=BarHeight

的圆。这个大部分透明的圆将在剪裁区域内绘制。稍微宽一点的横条更好地显示更多的半圆弧。祝你的项目好运！