旋转从一个中心点一个全尺寸的画布图像不动，其他的画布图像

下面的代码可以在这里看到的例子 - 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

的目标是为“蓝色背景”图像在高度和WID在画布上坐然后用混合模式将“flare”图像绘制在该图像的顶部，并用动画旋转以创建一种闪烁效果。

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

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

来源

2014-07-02 Chris G-Jones

刚刚提的是，下面的解决方案的伟大工程，我所做的是让minScale量，然后乘以三角形的宽度！ –

如果我理解正确，那么当耀斑以任意角度旋转时，需要耀斑的最短部分仍然覆盖画布。

既然你只显示在任何时间的一半耀斑，耀斑的最短部分从火炬中心到火炬的顶部的距离：

enter image description here

var flareMinHeight = flare.height/2;

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

enter image description here

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

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

var minScale = requiredLength/flareMinHeight;

来源

2014-07-02 05:03:01 markE

感谢人花了很多年试图解决这个问题！ –

旋转从一个中心点一个全尺寸的画布图像不动，其他的画布图像

回答

相关问题