动画表情符号以在HTML5画布中动画动画

Question

我试图动画以前在画布中绘制的表情符号。我正在尝试绘制并在教程后使用框架清除但是没有得到结果。我有6帧表情符号编码，我不确定如何在代码中包含它。这就是我到目前为止所做的：

img

我不确定我是否在正确的轨道上，因为我很难用动画制作。有没有人有任何可以给我指导的建议？

Answer 1

您有两个上下文的名称：mainContext＆amp; ctx。

将其更改为单个名称，您的脸部是“笑脸”＆＃34; ！ ： - ）

...

动画：

使用requestAnimationFrame循环更改scaleY中scale(scaleX,scaleY)的值。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您从未声明ctx变量。 <{1}}改变了所有mainContext，它应该可以正常工作。