WeChat mini-app widgets implement live streaming like bubble effect based on Canvas

This article mainly introduces the mini-program and small components in detail. the Canvas-based live streaming like bubble effect has some reference value, interested friends can refer to this article for details about the small program and small components. it is of reference value to realize the bubble effect of live streaming like based on Canvas, for more information, see

Canvas first to implement live streaming like bubbles:

Implementation details:

1. JS:

DrawImage: function (data) {[/align] var that = this var p10 = data [0] [0]; /* coordinate value of the starting point of the third-order besell curve */var p11 = data [0] [1]; /* coordinate value of the first control point of the third-order besell curve */var p12 = data [0] [2]; /* coordinate value of the second control point of the third-order besell curve */var p13 = data [0] [3]; /* coordinate value of the end point of the third-order besell curve */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;/* calculate the polynomial coefficient (the same below) */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) + bx1 * (t * t) + cx1 * t + p10.x; var yt1 = ay1 * (t * t) + by1 * (t * t) + cy1 * t + p10.y; var cx2 = 3 * (p21.x-p1_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) + bx2 * (t * t) + cx2 * t + p20.x; var yt2 = ay2 * (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; /* calculate the xt yt value */var xt3 = ax3 * (t * t) + bx3 * (t * t) + cx3 * t + p30.x; var yt3 = ay3 * (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. principles:

A. draw three different third-order besell curves and select three images to move them along their respective besell curves. the trajectory is as follows:

Using polynomial coefficients, we can obtain the mathematical expressions of x (t) and y (t:

cx = 3 * ( x1 - x0 )bx = 3 * ( x2 - x1 ) - cxax = x3 - x0 - cx - bxcy = 3 * ( y1 - y0 )    by = 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

Here we drew three besell curves and applied the formula three times. here we didn't use loops. if there are too many besell curves, we can call ctx cyclically. drawImage, where factor. t is the parameter of the third-order besell curve. the value range is [0, 1], and ctx is called. draw (), and set a timer to realize the movement of the image along the besell curve.

3. Tip:

The timer used here is implemented through the requestAnimationFrame () function. the reason for discontinuing setInterval is that there is a card frame phenomenon in the actual test and the animation shows a slight discontinuous.

Project address:

Github: https://github.com/jeffer0323/We-Canvas

For more articles about how to use the Canvas-based mini-app widgets to implement the live streaming like bubble effect, refer to the PHP Chinese network!