將swf添加到畫布

Question

我試圖將以下swf：http://assets.zwinky.com/assets3/stud/express/01/ex1.2.swf添加到畫布。

<canvas style="position: relative; display: block; width: 100%;" width="565" height="656" src="http://assets.zwinky.com/assets3/stud/express/01/ex1.2.swf"></canvas> 

我現在怎麼預覽這個？我得到畫布的唯一方式是：

<object width="100" height="100"> 
    <param name="movie" value="http://assets.zwinky.com/assets3/stud/express/01/ex1.2.swf"> 
    <embed src="http://assets.zwinky.com/assets3/stud/express/01/ex1.2.swf" width="100" height="100"> 
    </embed> 
</object> 

有沒有另一種方法？

Answer 1

您可以使用原生html5畫布來做您的拍動翅膀效果。

的零件

要旋轉翼圍繞其翅根：

• context.translate到要翼根是在畫布上的點。 translate會將畫布原點[x = 0，y = 0]移動到您的翻譯點。
• context.rotate到您目前所需的翼片角度
• context.drawImage繪製您的機翼圖像。您必須根據原始圖像中翼根的位置繪製您的機翼偏移。該偏移將翼根拉到新翻譯的畫布原點。

要動畫撲：

​​爲您提供了一個高效的動畫循環，火災大約每1/1/60秒。

在動畫循環：

• 在當前flapAngle
• 更改flapAngle下一個動畫循環
• 請求通過動畫另一個迴路繪製的翅膀。 requestAnimationFrame只調用一次函數，所以當前的動畫循環完成後，您必須再次調用​​來請求下一個循環。

這裏的註釋代碼和演示：

// canvas vars 
 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
// wing vars 
 
var leftwing,rightwing;   // the wing canvas-images 
 
var lx=230;      // X of left wing root 
 
var ly=117;      // Y of left wing root 
 
var rx=7;      // X of right wing root 
 
var ry=117;      // Y of right wing root 
 
var wingPadding=40;    // controls space between wings 
 

 
// animation vars 
 
var flapAngle=0;    // controls current flap angle 
 
var flapIncrement=Math.PI/240; // controls animation speed 
 
var flapDirection=1;   // controls flap direction 
 
var minFlapAngle=-Math.PI/8; // controls max upflap 
 
var maxFlapAngle=Math.PI/30; // controls max downflap 
 

 
// load the wing image 
 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/wings.png"; 
 
function start(){ 
 
    // make left & right canvas-wings 
 
    makeWings(); 
 
    // start the animation 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function animate(time){ 
 
    // flap the wings at the current flapAngle 
 
    flapWings(300,150,flapAngle); 
 
    // change the flapAngle for next animation loop 
 
    flapAngle+=flapIncrement*flapDirection; 
 
    if(flapAngle>maxFlapAngle || flapAngle<minFlapAngle){ 
 
     flapDirection*=-1; 
 
     flapAngle+=flapIncrement*flapDirection; 
 
    } 
 
    // request another animation loop 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function makeWings(){ 
 
    // clip left wing from the img 
 
    leftwing=document.createElement('canvas'); 
 
    var cctx=leftwing.getContext('2d'); 
 
    leftwing.width=237; 
 
    leftwing.height=130; 
 
    cctx.drawImage(img,26,26,237,130,0,0,237,130); 
 
    // make right wing as mirror image of left wing 
 
    rightwing=document.createElement('canvas'); 
 
    cctx=rightwing.getContext('2d'); 
 
    rightwing.width=237; 
 
    rightwing.height=130; 
 
    cctx.translate(237,0); 
 
    cctx.scale(-1,1); 
 
    cctx.drawImage(leftwing,0,0); 
 
} 
 

 
function flapWings(x,y,rAngle){ 
 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 

 
    // LEFT wing 
 
    // move the canvas origin to the coordinate where 
 
    //  you want the left wing root to be 
 
    ctx.translate(x,y); 
 
    // rotate the canvas by the current flapAngle 
 
    ctx.rotate(rAngle); 
 
    // draw the left wing on the canvas 
 
    ctx.drawImage(leftwing,-lx,-ly); 
 
    // always clean up -- reset transformation back to default 
 
    ctx.setTransform(1,0,0,1,0,0); 
 

 
    // RIGHT wing 
 
    // move the canvas origin to the coordinate where 
 
    //  you want the left wing root to be 
 
    ctx.translate(x+wingPadding,y); 
 
    // rotate the canvas by the current flapAngle 
 
    ctx.rotate(-rAngle); 
 
    // draw the right wing on the canvas 
 
    ctx.drawImage(rightwing,-rx,-ry); 
 
    // always clean up -- reset transformation back to default 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=650 height=300></canvas>