Добавить 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, чтобы нарисовать ваше изображение крыла. Вы должны сделать свое крыло смещенным положением корня крыла в исходном изображении. Это смещение притягивает корень крыла к вновь переведенному холсту.

Для анимации хлопанья:

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