Javascript 从中心点旋转全尺寸画布图像，而不移动其他画布图像

以下代码示例可在此处查看-

我一直在尝试在画布上绘制两幅图像（发光，然后闪烁。下面是这些图像的链接）

目标是使“蓝色背景”图像位于容器高度和宽度处的画布上，并使用混合模式在该图像的顶部绘制“光斑”图像，并使用动画旋转以创建一种闪烁效果

我的问题是，因为我使用的图像是矩形的，当“光斑”在某些点旋转时，你可以看到下面层的边缘

我试着用三角法找到容器的对角线宽度，并以此宽度绘制“光斑”图像，使其始终覆盖整个画布，但遗憾的是，您仍然可以在某些点看到背景层（但比以前少得多）

我需要一种方法使flare图像始终覆盖整个画布，有人能告诉我正确的方向吗

  var banner = $('#banner'),
    flare = document.getElementById('flare'),
    glow = document.getElementById('glow'),
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    blendMode = "multiply";

$window.load(function(){

    _canvasWidth = banner.outerWidth(),
    _canvasHeight = banner.outerHeight();

    canvas.width = _canvasWidth;
    canvas.height = _canvasHeight;

    var _flareSum = (_canvasWidth * _canvasWidth) + (_canvasHeight * _canvasHeight);
        _flareWidth = Math.sqrt(_flareSum); 

    _angle = 0;

    setInterval(function() {

        _angle = _angle +0.25;

        // draw the bg without a blend mode
        ctx.globalCompositeOperation = "source-over";  
        ctx.drawImage(glow, 0, 0, _canvasWidth, _canvasHeight); 
        ctx.save();

        // clear the canvas
        // ctx.clearRect(0, 0, _canvasWidth, _canvasHeight);

        ctx.translate( _canvasWidth/2, _canvasHeight);  // move to center point

        ctx.globalCompositeOperation = blendMode;
        ctx.rotate(Math.PI / 180 * (_angle)); // 1/2 a degree
        ctx.drawImage(flare, -_flareWidth/2, -_flareWidth/2, _flareWidth, _flareWidth); // redraw ia=mages

        ctx.restore();

        //console.log(_angle)

    }, 1);

---

如果我理解正确，当光斑以任何角度旋转时，您需要光斑的最短部分来覆盖画布

由于在任何时候都只显示一半光斑，因此光斑的最短部分是从光斑中心到光斑顶部的距离：

var flareMinHeight = flare.height/2;

光斑必须覆盖的最长长度是从光斑旋转点到画布左上角

var dx=rotationPointX;
var dy=rotationPointY;
var requiredLength=Math.sqrt(dx*dx+dy*dy);

因此，您需要缩放光斑，使其至少达到上面计算的长度：

var minScale = requiredLength / flareMinHeight;

---

注意下面的解决方案非常有效，我所做的是得到minScale量，然后乘以三角形的宽度！