如何在html画布上绘制铃声

Question

我正在尝试在画布上绘制一个铃声图标，并且需要在图像上添加动画效果，例如铃声响起。我找不到解决这个问题的好方法。就像画一个铃铛图标，只在铃铛的下部做振动。有人可以给我提示并举个例子吗？这是我的小提琴手：

var x = 20; 
    var canvas = document.getElementById('canvas'); 
    var c = canvas.getContext('2d'); 
    
        var  mapSprite = new Image();
        mapSprite.src = "https://png.pngtree.com/png-vector/20190411/ourmid/pngtree-vector-bell-icon-png-image_927119.jpg";
        
function drawIt() { 
    window.requestAnimationFrame(drawIt); 
    

    c.globalAlpha = 0.07;
    c.clearRect(0,0,canvas.width,canvas.height); 
   // c.fillStyle = "white"; 
    c.fillRect(x,10,80,100); 
    c.stroke();
    c.globalAlpha = 1;
   
c.drawImage(mapSprite, x, 10, 80, 100);

   
    if(x==20)
    x-=3
    else
    x+=1; 
} 

drawIt();

Answer 1

您需要将钟罩与拍板分开并分别为它们设置动画。您可以仅移动拍板或为每个拍板添加不同的动画：虽然拍板会描述弧形轨迹，从圆顶的一侧弹到另一侧，但圆顶将从顶部中心旋转。