Javascript HTML5画布alpha透明度不'；当窗口较大时，不能在firefox中处理曲线

我在HTML5画布上绘制了一条曲线，并使用alpha透明度创建了一个辉光效果，方法是在下面绘制一条较厚的曲线，alpha小于1，然后在顶部绘制一条较薄的曲线（我使用几个递归级别来实现这一点）

好吧，问题出在这里。它的工作方式完全符合我希望它在铬，给一个美丽的辉光效果。但在Firefox中，如果我的浏览器尺寸大于300px左右，alpha无法正确渲染（是的，这听起来很疯狂，但它实际上是出于某种原因）。如果我把我的浏览器调整到非常小的尺寸，那么alpha会突然工作，我会得到令人敬畏的光芒。一旦我把窗户做成一个合理的尺寸，阿尔法就不再起作用了，所以我得到的不是一条发光的线，而是一条非常粗的线（代码如下

HTML:

Javascript:

window.viewport = document.getElementById("viewport");
window.context = viewport.getContext("2d");
window.xFactor = 1;
window.yFactor = 1;

function initializeViewport() {
    maximizeViewport();
    setFactors();
}

function maximizeViewport() {
    viewport.width = window.innerWidth;
    viewport.height = window.innerHeight;
}

function setFactors() {
    xFactor = window.innerWidth / 100;
    yFactor = window.innerHeight / 100;
}

function absX(x) {
    return Math.floor(x * xFactor);
}

function absY(y) {
    return Math.floor(y * yFactor);
}


function drawQuadraticCurve(startX, startY, controlX, controlY, endX, endY, lineWidth, gradient, alpha, glowiness, glowLevel) {
    glowLevel = (typeof glowLevel === 'undefined') ? 0 : glowLevel;

    // Draw the glow first
    if (glowLevel < glowiness) {
        drawQuadraticCurve(startX, startY, controlX, controlY, endX, endY, lineWidth + Math.sqrt(glowLevel), gradient, alpha*0.65, glowiness, glowLevel + 1);
    }

    // Then draw the curve
    context.beginPath();
    context.moveTo(absX(startX), absY(startY));
    context.quadraticCurveTo(absX(controlX), absY(controlY), absX(endX), absY(endY));
    context.lineWidth = lineWidth;
    context.strokeStyle = gradient;
    context.globalAlpha = alpha;
    context.shadowColor = "#FFFFFF";
    context.shadowBlur = 0;
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.stroke();
}

    function createRadialGradient(colors, innerX, innerY, innerR, outerX, outerY, outerR) {
    var gradient = context.createRadialGradient(absX(innerX),absY(innerY),Math.min(absX(innerR/2), absY(innerR/2)),absX(outerX),absY(outerY),Math.min(absX(outerR/2), absY(outerR/2)));
    var gradientLength = colors.length;
    for (i=0; i<gradientLength; i++) {
        gradient.addColorStop(colors[i][0], colors[i][1]);
    }

    return gradient;
}


initializeViewport();
drawQuadraticCurve(80,65,20,70,70,10, 1,createRadialGradient([[0,"#FFFFFF"],[0.7,"#33CCFF"],[1,"#9944FF"]],50,50,1,50,50,90),1,8,0);

window.viewport=document.getElementById（“viewport”）；
window.context=viewport.getContext（“2d”）；
window.xFactor=1；
window.yFactor=1；
函数initializeViewport（）{
maximizeViewport（）；
设置因子（）；
}
函数maximizeViewport（）{
viewport.width=window.innerWidth；
viewport.height=window.innerHeight；
}
函数设置因子（）{
xFactor=window.innerWidth/100；
yFactor=window.innerHeight/100；
}
函数absX（x）{
返回数学楼层（x*xFactor）；
}
函数absY（y）{
返回数学楼层（y*y因子）；
}
函数绘制二次曲线（startX、startY、controlX、controlY、endX、endY、线宽、渐变、alpha、发光度、发光级别）{
glowLevel=（glowLevel的类型==‘未定义’）？0:glowLevel；
//先画出辉光
if（发光水平<发光度）{
绘制二次曲线（startX、startY、controlX、controlY、endX、endY、线宽+数学sqrt（发光级别）、渐变、alpha*0.65、发光、发光级别+1）；
}
//然后画出曲线
context.beginPath（）；
上下文。移动到（absX（startX），absY（startY））；
二次曲线（absX（controlX）、absY（controlY）、absX（endX）、absY（endY））；
context.lineWidth=线宽；
context.strokeStyle=渐变；
context.globalAlpha=alpha；
context.shadowColor=“#FFFFFF”；
context.shadowBlur=0；
context.shadowOffsetX=0；
context.shadowOffsetY=0；
stroke（）；
}
函数createRadialGradient（颜色、innerX、innerY、innerR、outerX、outerY、outerR）{
var gradient=context.createRadialGradient（absX（innerX）、absY（innerY）、Math.min（absX（innerR/2）、absY（innerX）、absY（outerY）、Math.min（absX（outerR/2）、absY（outerR/2））；
var gradientLength=colors.length；
对于（i=0；i这实际上是一条注释，但它不适合分配给注释的空间。：-）

我已经咨询了Html5画布上无所不知的甲骨文公司——w3.org

如果指定零阴影模糊（如您所做），则规格说明应不应用阴影。

这意味着画布尺寸较大的FF正确地应用了w3标准（未绘制任何阴影），而Chrome&FF（较小版本）在不应该应用阴影时都错误地应用了阴影


仅当alpha组件的不透明度组件
“阴影颜色”的颜色为非零，且阴影模糊为
非零，或shadowOffsetX为非零，或shadowOffsetY为非零
非零

因此，要实现跨浏览器兼容性，在
阴影模糊=0
时，不能依赖渲染中的怪癖。必须在“规则”范围内以另一种方式创建光晕。

这是一条发光的二次曲线，由小的、独立的线段组成——每个线段都是不同的颜色。等于线段颜色的阴影颜色会产生发光。渲染在不同浏览器（包括FF）之间兼容

（可以控制线宽和辉光强度）


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//定义颜色的变量--使用hsl而不是rgb
var-hue=10；
var hueShift=4；
//定义二次曲线
var startPt={x:350，y:100}；
var-controlPt={x:0，y:250}；
var-endPt={x:350，y:400}；
//定义项目起点和终点的变量
//当前线段。
var newXY=启动时间；
var oldXY=起始时间；
//二次曲线上的电流间隔
//（用于沿曲线计算x、y）
//（t有点像曲线上的百分比——有点像，但不是）
var t=0；
//无阴影线宽
ctx.线宽=1；
//要应用于线周围的阴影
ctx.shadowBlur=7；
//使收头变圆以直观地混合线段
ctx.lineCap='round'；
//从黑色填充的画布开始
ctx.fillStyle='black'；
ctx.fillRect（0,0，cw，ch）；
//启动动画
请求动画帧（动画）；
函数动画（时间）{
//沿曲线计算新的x，y
var T=T/100；
var newXY=getQuadraticBezierXYatT（startPt、controlPt、endPt、T）；
//更改此段的颜色
色调=（色调+色调）%360；
//使用阴影光晕绘制此线段
发光线（oldXY、newXY、色调）；
//设置旧=新，为下一个循环做准备
oldXY=newXY；
//请求另一个动画循环intil达到100
如果（++tDid您忘记为
createRadialGradient
包含代码了吗？无论如何，请不要在*{}中设置CSS宽度和高度。这将对画布产生不利影响。是的，我刚刚编辑了我的帖子以包含它。尝试摆脱CSS规则，但似乎没有效果。这是一个函数参数；当我调用它时，我传递的值为1，当绘制直线时，透明度起作用；只有在绘制圆弧、贝塞尔曲线和二次曲线时，透明度才起作用问题来了，谢谢，我可以认为这是一个解决办法，如果我不能让它正常工作的方式……我有点担心性能，虽然（因为这些事情将是动画），所以我会
* {
    background-color:#000000;
    padding:0px;
    margin:0px;
    width:100%;
    height:100%;
    overflow:hidden;
}

#viewport {
    border:0px;
}

window.viewport = document.getElementById("viewport");
window.context = viewport.getContext("2d");
window.xFactor = 1;
window.yFactor = 1;

function initializeViewport() {
    maximizeViewport();
    setFactors();
}

function maximizeViewport() {
    viewport.width = window.innerWidth;
    viewport.height = window.innerHeight;
}

function setFactors() {
    xFactor = window.innerWidth / 100;
    yFactor = window.innerHeight / 100;
}

function absX(x) {
    return Math.floor(x * xFactor);
}

function absY(y) {
    return Math.floor(y * yFactor);
}


function drawQuadraticCurve(startX, startY, controlX, controlY, endX, endY, lineWidth, gradient, alpha, glowiness, glowLevel) {
    glowLevel = (typeof glowLevel === 'undefined') ? 0 : glowLevel;

    // Draw the glow first
    if (glowLevel < glowiness) {
        drawQuadraticCurve(startX, startY, controlX, controlY, endX, endY, lineWidth + Math.sqrt(glowLevel), gradient, alpha*0.65, glowiness, glowLevel + 1);
    }

    // Then draw the curve
    context.beginPath();
    context.moveTo(absX(startX), absY(startY));
    context.quadraticCurveTo(absX(controlX), absY(controlY), absX(endX), absY(endY));
    context.lineWidth = lineWidth;
    context.strokeStyle = gradient;
    context.globalAlpha = alpha;
    context.shadowColor = "#FFFFFF";
    context.shadowBlur = 0;
    context.shadowOffsetX = 0;
    context.shadowOffsetY = 0;
    context.stroke();
}

    function createRadialGradient(colors, innerX, innerY, innerR, outerX, outerY, outerR) {
    var gradient = context.createRadialGradient(absX(innerX),absY(innerY),Math.min(absX(innerR/2), absY(innerR/2)),absX(outerX),absY(outerY),Math.min(absX(outerR/2), absY(outerR/2)));
    var gradientLength = colors.length;
    for (i=0; i<gradientLength; i++) {
        gradient.addColorStop(colors[i][0], colors[i][1]);
    }

    return gradient;
}


initializeViewport();
drawQuadraticCurve(80,65,20,70,70,10, 1,createRadialGradient([[0,"#FFFFFF"],[0.7,"#33CCFF"],[1,"#9944FF"]],50,50,1,50,50,90),1,8,0);