在 HTML5 画布中为表情符号设置动画以使用动画眨眼答案

【问题标题】：Animating an emoticon to wink with animation in HTML5 canvas在 HTML5 画布中为表情符号设置动画以使用动画眨眼
【发布时间】：2016-07-24 20:51:45
【问题描述】：

我正在尝试为以前在画布中绘制的表情制作动画。我正在尝试按照教程使用框架进行绘制和清除，但没有得到结果。我有 6 帧表情符号编码，但不确定如何将其包含在代码中。这是我目前所拥有的：

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

我不确定我是否走在正确的轨道上，因为我在动画方面遇到了困难。有人有什么建议可以给我指导吗？

【问题讨论】：

标签： javascript jquery html animation canvas

【解决方案1】：

上下文有 2 个名称：mainContext 和 ctx。

把它改成一个名字，你的脸就是“笑脸”！ :-)

...

制作动画：

使用requestAnimationFrame 循环随着时间的推移更改scale(scaleX,scaleY) 中的scaleY 值。

这是带注释的代码和演示：

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()
}

&lt;canvas id="myCanvas" height="1200" width="900"&gt;&lt;/canvas&gt;

【讨论】：

如何让眼睛“睁开”，反转动画？
@phoenixCoder。是的，那是完全正确的......当眼睛完全闭合时反转动画。我已经编辑了演示，以显示眼睛既眨眼又重新打开。干杯！

【解决方案2】：

您从未声明过ctx 变量。将您所有的mainContext 更改为ctx，它应该可以正常工作。

【讨论】：