HTML5 tuvalinde animasyonla göz kırpmak için bir ifade animasyonu

Daha önce tuvalde çizilmiş bir ifadeyi hareketlendirmeye çalışıyorum. Bir çizim yapmaya ve bir öğreticiyi izleyen kareleri kullanarak temizlemeye çalışıyorum ancak sonuç almıyorum. Kodlanmış ifade kodunun 6 karesi var ve kodun içine nasıl ekleneceğinden emin değilim. Ben animasyon ile zor bir zaman var gibi ben bile doğru yolda olup olmadığımıHTML5 tuvalinde animasyonla göz kırpmak için bir ifade animasyonu

<!DOCTYPE html> 
<html> 

<head> 
    <title>Adding Animation</title> 
<style> 
    canvas { 
    border: 3px #CCC solid; 
    } 
</style> 
</head> 

<body> 
    <div id="container"> 
    <canvas id="myCanvas" height="1200" width="900"></canvas> 
    </div> 
    <script> 
    var mainCanvas = document.querySelector("#myCanvas"); 
    var mainContext = mainCanvas.getContext("2d"); 

var canvasWidth = mainCanvas.width; 
var canvasHeight = mainCanvas.height; 

function drawCircle() { 
    mainContext.clearRect(0, 0, canvasWidth, canvasHeight); 

    // color in the background 
    mainContext.fillStyle = "#EEEEEE"; 
    mainContext.fillRect(0, 0, canvasWidth, canvasHeight); 

    // draw the circle 
     ctx.beginPath(); 
     ctx.strokeStyle = "000000"; 
     ctx.lineWidth = 5; 
     ctx.fillStyle = "yellow"; 
     ctx.arc(600, 450, 150, 0, Math.PI * 2, true); 
     ctx.stroke(); 
     ctx.closePath(); 
     ctx.fill(); 

     //The smile 
     ctx.beginPath(); 
     ctxstrokeStyle = "black"; 
     ctx.lineWidth = 2; 
     ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false) 
     ctx.stroke(); 
     ctx.closePath(); 

     //The eyes 
     //Left 
     ctx.save(); 
     ctx.scale(0.65, 1); 
     ctx.beginPath(); 
     ctx.arc(850, 405, 40, 0 * Math.PI, Math.PI * 2, false); 
     ctx.fillStyle="black"; 
     ctx.fill(); 
     ctx.stroke(); 
     ctx.closePath(); 
     ctx.restore(); 

     //Right 
     ctx.save(); 
     ctx.scale(0.65, 1); 
     ctx.beginPath(); 
     ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false); 
     ctx.fillStyle="black"; 
     ctx.fill(); 
     ctx.stroke(); 
     ctx.closePath(); 
     ctx.restore() 
    } 
drawCircle(); 
</script> 
</body> 
</html>

emin oldum: Bu defa ne var. Bana rehberlik edebileceği önerileri olan var mı?

kaynak

2016-04-05 phoenixCoder

Bağlam için 2 adınız vardır: mainContext & ctx.

Tek bir adla değiştirin ve yüzünüz "gülen" dir! :-)

...

canlandırmak için:

zamanla scale(scaleX,scaleY) içinde scaleY değerini değiştirmek için bir requestAnimationFrame döngü kullanın.

İşte açıklamalı koddur ve Demo:

var mainCanvas = document.querySelector("#myCanvas"); 
 
var ctx = mainCanvas.getContext("2d"); 
 

 
var canvasWidth = mainCanvas.width; 
 
var canvasHeight = mainCanvas.height; 
 

 
ctx.translate(-425,-275); 
 

 
drawCircle(1); 
 

 
// global var to hold pct the left eye is open 
 
// 1==fully open, 0==fully closed 
 
var scaley=1; 
 
var direction=-1; 
 
// request 1 animate() loop 
 
requestAnimationFrame(animate); 
 
function animate(time){ 
 
    // draw smiley with the specified eye openness 
 
    drawCircle(scaley); 
 
    scaley+=.02*direction; 
 
    if(scaley<0){ 
 
    scaley=0; 
 
    direction=1; 
 
    } 
 
    if(scaley>1){ 
 
    scaley=1; 
 
    direction=-1; 
 
    } 
 
    requestAnimationFrame(animate); 
 
} 
 

 

 
function drawCircle(scaleY) { 
 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
 

 
    // color in the background 
 
    ctx.fillStyle = "#EEEEEE"; 
 
    ctx.fillRect(0, 0, canvasWidth, canvasHeight); 
 

 
    // draw the circle 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "000000"; 
 
    ctx.lineWidth = 5; 
 
    ctx.fillStyle = "yellow"; 
 
    ctx.arc(600, 450, 150, 0, Math.PI * 2, true); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
    ctx.fill(); 
 

 
    //The smile 
 
    ctx.beginPath(); 
 
    ctxstrokeStyle = "black"; 
 
    ctx.lineWidth = 2; 
 
    ctx.arc(600, 475, 75, .1 * Math.PI, Math.PI * .9, false) 
 
    ctx.stroke(); 
 

 
    //The eyes 
 
    //Left 
 
    ctx.save(); 
 
    // move the [0,0] origin to the left eye's centerpoint 
 
    ctx.translate(550,405); 
 
    // close the left eye by the specified scaleY 
 
    ctx.scale(0.65, scaleY); 
 
    ctx.beginPath(); 
 
    // draw the left eye (arc) at 0,0 because 
 
    // we translated the origin to [550,405] earlier 
 
    ctx.arc(0, 0, 40, 0 * Math.PI, Math.PI * 2, false); 
 
    ctx.fillStyle="black"; 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
    ctx.restore(); 
 

 
    //Right 
 
    ctx.save(); 
 
    ctx.scale(0.65, 1); 
 
    ctx.beginPath(); 
 
    ctx.arc(1000,405,40, 0*Math.PI, Math.PI*2, false); 
 
    ctx.fillStyle="black"; 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
    ctx.restore() 
 
}

<canvas id="myCanvas" height="1200" width="900"></canvas>

kaynak

2016-04-05 15:53:39 markE

Animasyonu tersine çevirerek gözünüzü "açık" olarak nasıl yedeklersiniz? – phoenixCoder

@phoenixCoder. Evet, bu tam olarak doğru ... göz tamamen kapandığında sadece animasyonu tersine çevir. Göz kırptığını ve gözünü açtığını gösteren demoyu düzenledim. Şerefe! – markE

Bir ctx değişken beyan etmediği. mainContext saatinizi ctx numaralı telefondan değiştirin ve çalışıyor olması gerekiyor.

kaynak

2016-04-05 16:07:33

https://jsfiddle.net/ty6otzhm/ –

HTML5 tuvalinde animasyonla göz kırpmak için bir ifade animasyonu

cevap

İlgili konular