Utilisez Canvas pour obtenir l'effet bulle des likes lors de la diffusion en direct

Première version de Canvas pour implémenter la diffusion en direct comme des rendus à bulles :

Détails d'implémentation :

1.JS :

drawImage:function(data){
var that = this 
    var p10= data[0][0];  /* 三阶贝塞尔曲线起点坐标值*/ 
    var p11= data[0][1];  /* 三阶贝塞尔曲线第一个控制点坐标值*/ 
    var p12= data[0][2];  /* 三阶贝塞尔曲线第二个控制点坐标值*/ 
    var p13= data[0][3];  /* 三阶贝塞尔曲线终点坐标值*/ 
    var p20= data[1][0]; 
    var p21= data[1][1]; 
    var p22= data[1][2]; 
    var p23= data[1][3]; 
    var p30= data[2][0]; 
    var p31= data[2][1]; 
    var p32= data[2][2]; 
    var p33= data[2][3]; 
    var t = factor.t; 
    /*计算多项式系数 （下同）*/   
    var cx1 = 3*(p11.x-p10.x); 
    var bx1 = 3*(p12.x-p11.x)-cx1; 
    var ax1 = p13.x-p10.x-cx1-bx1; 
    var cy1 = 3*(p11.y-p10.y); 
    var by1 = 3*(p12.y-p11.y)-cy1; 
    var ay1 = p13.y-p10.y-cy1-by1; 
    var xt1 = ax1*(t*t*t)+bx1*(t*t)+cx1*t+p10.x; 
    var yt1 = ay1*(t*t*t)+by1*(t*t)+cy1*t+p10.y; 
    var cx2 = 3*(p21.x-p20.x); 
    var bx2 = 3*(p22.x-p21.x)-cx2; 
    var ax2 = p23.x-p20.x-cx2-bx2; 
    var cy2 = 3*(p21.y-p20.y); 
    var by2 = 3*(p22.y-p21.y)-cy2; 
    var ay2 = p23.y-p20.y-cy2-by2; 
    var xt2 = ax2*(t*t*t)+bx2*(t*t)+cx2*t+p20.x; 
    var yt2 = ay2*(t*t*t)+by2*(t*t)+cy2*t+p20.y; 
    var cx3 = 3*(p31.x-p30.x); 
    var bx3 = 3*(p32.x-p31.x)-cx3; 
    var ax3 = p33.x-p30.x-cx3-bx3; 
    var cy3 = 3*(p31.y-p30.y); 
    var by3 = 3*(p32.y-p31.y)-cy3; 
    var ay3 = p33.y-p30.y-cy3-by3; 
    /*计算xt yt的值 */ 
    var xt3 = ax3*(t*t*t)+bx3*(t*t)+cx3*t+p30.x; 
    var yt3 = ay3*(t*t*t)+by3*(t*t)+cy3*t+p30.y; 
    factor.t +=factor.speed; 
    ctx.drawImage("../../images/heart1.png",xt1,yt1,30,30); 
    ctx.drawImage("../../images/heart2.png",xt2,yt2,30,30); 
    ctx.drawImage("../../images/heart3.png",xt3,yt3,30,30); 
    ctx.draw(); 
    if(factor.t>1){ 
      factor.t=0; 
      cancelAnimationFrame(timer); 
      that.startTimer(); 
    }else{ 
      timer =requestAnimationFrame(function(){ 
        that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:30,y:400},{x:30,y:300},{x:80,y:150},{x:30,y:0}],[{x:30,y:400},{x:0,y:90},{x:80,y:100},{x:30,y:0}]]) 
     }) 
    }}

2. Principe :

a. En dessinant trois courbes de Bézier de troisième ordre différentes, sélectionnez trois images et laissez-les se déplacer le long de leurs courbes de Bézier respectives. Les trajectoires de mouvement sont les suivantes. :

b. Calculer l'expression mathématique de la courbe de Bézier du troisième ordre x(t), y(t).

La courbe de Bézier du troisième ordre forme une courbe passant par quatre points, deux points de contrôle, un point de départ et un point d'arrivée.

En utilisant des coefficients polynomiaux, vous pouvez obtenir les expressions mathématiques de x(t), y(t) :
cx = 3 * ( x1 - x0 )bx = 3 * ( x2 - x1 ) - cxax = x3 - x0 - cx - bxcy = 3 * ( y1 - y0 ) par = 3 * ( y2 - y1 ) - cyay = y3 - y0 - cy - byx(t) = ax * t ^ 3 + bx * t ^ 2 + cx * t + x0y(t) = ay * t ^ 3 + by * t ^ 2 + cy * t + y0
Trois courbes de Bézier sont dessinées ici. Appliquez simplement la formule trois fois. Aucune boucle n'est utilisée ici. S'il y a plusieurs courbes de Bézier, vous pouvez appeler ctx.drawImage dans une boucle, où factor.t est le paramètre de la courbe de Bézier du troisième ordre, avec une plage de valeurs de [0,1], et enfin appeler ctx.draw (), et régler La minuterie peut réaliser le mouvement de l'image le long de la courbe de Bézier.
3.Astuce :

La minuterie utilisée ici est implémentée via la fonction requestAnimationFrame(). La raison de la dépréciation de setInterval est qu'il y a un phénomène de blocage d'image dans le test réel et que l'affichage de l'animation est légèrement discontinu. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!