将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>