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

Question

可以在此处查看以下代码的示例 - http://dev.touch-akl.com/celebtrations/

我一直想做的是在画布上绘制2张图像（发光然后闪光。下面是这些图像的链接）

http://dev.touch-akl.com/celebtrations/wp-content/themes/beanstalk/img/flare.jpg

http://dev.touch-akl.com/celebtrations/wp-content/themes/beanstalk/img/blue-background.jpg

目标是让'蓝色背景'图像在容器的高度和宽度处放置在画布上，并且使用混合模式在该图像的顶部绘制“耀斑”图像并使用动画创造一种闪烁效果。

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

我尝试做的是使用三角法找到容器的对角线宽度，并在该宽度处绘制'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);

Answer 1

如果我理解正确的话，当耀斑以任何角度旋转时，你需要最短的部分才能覆盖画布。

由于你在任何时候只显示一半的耀斑，所以耀斑的最短部分是从耀斑中心到耀斑顶部的距离：

var flareMinHeight = flare.height/2;

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

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

所以你需要将耀斑缩放到至少上面计算的长度：

var minScale = requiredLength / flareMinHeight;