Question

我想绘制一个带有两条贝塞尔曲线的形状，用于创建条形图可编辑。在两条曲线之间，这个区域必须是透明的。（具有背景兼容性）并且可以在此形状中绘制不透明的矩形以设置规格的值。我希望看到可以不使用像PNG这样的图像，而是用画布绘制PNG。

示例，在source-atop中使用带/ 2的rect。当完全透明的区域中，'source-a-top'或'source-in'中的rect不可见。为什么？区域可以具有完全透明但可见的区域？ ctx.fillStyle = Qt.rgba（255,255,255,0）==＆gt;不工作

当区域不完全不透明时它起作用。 ctx.fillStyle = Qt.rgba（255,255,255,0.5） ==＆gt;工作但不是背景的颜色。

我希望区域完全透明，在顶部，就在这个区域，矩形不透明。

https://jsfiddle.net/tg5zwnc2/1/

var cv = document.getElementById('cv');
var ct = cv.getContext('2d');
var courbeBezier =  [] 


courbeBezier.push([ ])
courbeBezier[courbeBezier.length-1].push({x:cv.width,y:10}) //origine
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:60 }) //control 1
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:70 }) //control 2
courbeBezier[courbeBezier.length-1].push({x:10,y:cv.height-10 }) //end

courbeBezier.push([ ])
courbeBezier[courbeBezier.length-1].push({x:0,y:cv.height}) //origine
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:10}) //control 1
courbeBezier[courbeBezier.length-1].push({x:cv.width/2,y:20 }) //control 2
courbeBezier[courbeBezier.length-1].push({x:cv.width,y:10}) //end

ct.beginPath()

//if you using this, ok
ct.fillStyle = 'yellow'//rgba(255, 255, 255, 0.1)'

//if you using this, the final rec is not visible on the top
//ct.fillStyle = 'rgba(255, 255, 255, 0)'

ct.moveTo(courbeBezier[0][0].x,courbeBezier[0][0].y)
for (var i =0;i<courbeBezier.length;i++)
{
if (i>0)                            
ct.lineTo(courbeBezier[i][0].x,courbeBezier[i][0].y)

ct.bezierCurveTo(courbeBezier[i][1].x, courbeBezier[i][1].y, courbeBezier[i][2].x,courbeBezier[i][2].y, courbeBezier[i][3].x,courbeBezier[i][3].y)


if (i>0)
ct.lineTo(courbeBezier[i-1][0].x,courbeBezier[i-1][0].y)


}
ct.stroke()
ct.fill()

ct.beginPath()
ct.globalCompositeOperation = "source-atop";
ct.fillStyle = "red";
ct.fillRect(0,0,cv.width/2,cv.height)
ct.fill()

如果使用fillStyle创建区域（ct.fillStyle ='rgba（255,255,255,0）'）顶部的最后一个矩形是不可见的，但是完全不透明并位于顶部？

Qt

0 个答案: