旋轉從一箇中心點一個全尺寸的畫布圖像不動，其他的畫布圖像

下面的代碼可以在這裏看到的例子 - 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

感謝人花了很多年試圖解決這個問題！ –

旋轉從一箇中心點一個全尺寸的畫布圖像不動，其他的畫布圖像

回答

相關問題