将 swf 添加到 canvas

Question

我正在尝试添加以下 swf：http://assets.zwinky.com/assets3/stud/express/01/ex1.2.swf 到 canvas。

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

我现在如何预览？我得到 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

你可以用原生html5canvas来做你拍打翅膀的效果

零件

围绕其翼根旋转机翼：

context.translate 到 canvas 上您希望翼根所在的位置。 translate 导致 canvas 原点 [x=0,y=0] 移动到您的翻译点。
context.rotate 到您当前所需的机翼襟翼角度
context.drawImage画出你的翅膀形象。您必须根据原始图像中翼根的位置绘制机翼偏移量。此偏移将翼根拉到新翻译的 canvas 原点。

要制作拍打动画：

requestAnimationFrame 为您提供了一个高效的动画循环，大约每 1/60 秒触发一次。

在动画循环中：

在当前画出翅膀flapAngle
为下一个动画循环更改flapAngle
请求另一个循环播放动画。 requestAnimationFrame 只调用一次函数，所以当当前动画循环完成后，您必须再次调用 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/Whosebug/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>

将 swf 添加到 canvas

Add swf to canvas

flash

canvas