javascript - 从中心点旋转全尺寸 Canvas 图像，而不移动其他 Canvas 图像

Question

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

我一直在尝试做的是在 Canvas 上绘制 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

目标是让“蓝色背景”图像以容器的高度和宽度放置在 Canvas 上，并且使用混合模式将“耀斑”图像绘制在该图像之上，并使用动画来创建一种闪烁效果。

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

我尝试做的是使用三 Angular 法找到容器的对 Angular 线宽度，并以该宽度绘制“耀斑”图像，以便它始终覆盖整个 Canvas ，但可惜的是，您仍然可以在某些点看到背景层(但是比以前少得多)。

我需要一种方法让耀斑图像始终覆盖整个 Canvas ，有人能给我指出正确的方向吗？

  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

如果我理解正确的话，当耀斑旋转任何 Angular 时，你需要耀斑的最短部分仍然覆盖 Canvas 。

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

var flareMinHeight = flare.height/2;

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

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

因此，您需要将耀斑缩放到至少达到上面计算的长度:

var minScale = requiredLength / flareMinHeight;