清除 HTML 画布后未显示新形状

Question

我正在尝试在 HTML Canvas 中制作表情符号。我包含一个按钮来为表情符号的右眼添加眨眼功能。

但是我在这里遇到了一个问题，在清除画布后，新的修改后的表情符号没有出现。

有人可以帮我吗？

下面是我的 JavaScript 代码来实现这个目的。

基本上眨眼功能清除画布，然后重新创建表情符号，但用一条线替换右眼。

最初表情符号看起来像这样。

我正在努力做到这一点。

var canvas=document.querySelector('canvas')
var ctx=canvas.getContext('2d');
canvas.width=innerWidth;
canvas.height=innerHeight;
ctx.lineWidth=3;
ctx.strokeStyle='white'; 
ctx.fillStyle='cyan';
var col=['yellow','crimson','cyan','pink','orange'];

//Emoji face
ctx.beginPath();
ctx.arc(750,200,100,0,Math.PI*2,false);
ctx.fill();
ctx.stroke();

//left eye
ctx.beginPath();
ctx.arc(700,150,15,0,Math.PI*2,false);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke()

//Right eye
ctx.beginPath();
ctx.arc(800,150,15,0,Math.PI*2,false);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke()

//Nose
ctx.beginPath();
ctx.moveTo(735,200);
ctx.lineTo(765,200);
ctx.lineTo(750,230);
ctx.lineTo(735,200);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke();

//Mouth
ctx.beginPath();
ctx.arc(750,230,50,0,Math.PI,false);
ctx.stroke();

//Making new emoji with right eye closed
function wink()
{
ctx.clearRect(0,0,innerWidth,innerHeight);

//Emoji face
ctx.beginPath();
ctx.arc(750,200,100,0,Math.PI*2,false);
ctx.fill();
ctx.stroke();

//left eye
ctx.beginPath();
ctx.arc(700,150,15,0,Math.PI*2,false);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke()

//Right eye
ctx.beginPath();
ctx.moveTo(785,150);
ctx.lineTo(815,150);
ctx.stroke();

//Nose
ctx.beginPath();
ctx.moveTo(735,200);
ctx.lineTo(765,200);
ctx.lineTo(750,230);
ctx.lineTo(735,200);
ctx.fillStyle='white'
ctx.fill();
ctx.stroke();

//Mouth
ctx.beginPath();
ctx.arc(750,230,50,0,Math.PI,false);
ctx.stroke();

}

Answer 1

在未重置的初始画布绘制期间，表情符号的鼻子部分的fillStyle设置为白色。 在wink()的开头设置fillStyle: cyan 。

function wink() {
  ctx.fillStyle = 'cyan';
  /*
    Rest of the code
    ...
    ...
  */
}

希望这能解决您的问题。