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画出你的翅膀形象。您必须通过原始图像中翼根的位置绘制机翼偏移。此偏移将翼根拉到新转换的画布原点。

为拍打动画制作动画：

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

在动画循环中：

以当前flapAngle
更改下一个动画循环的flapAngle
通过动画请求另一个循环。 requestAnimationFrame只调用一次函数，所以当前动画循环完成后，你必须再次调用requestAnimationFrame来请求下一个循环。

以下是带注释的代码和演示：

＆＃13;

// 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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

将swf添加到画布

1 个答案: