Canvas dynamic ball overlap effect

In the javascript motion series, we have introduced various movements in detail, including the hitting motion. However, using canvas is another way of thinking. This article will introduce in detail the words above the canvas dynamic ball overlap effect

In the javascript motion series, we have introduced various movements in detail, including the hitting motion. However, using canvas is another way of thinking. This article will introduce the canvas dynamic ball overlap effect in detail.

Static ball

First, 50 static balls with random radius and random positions are generated.

Button
 
  
The current browser does not support canvas. Change the browser and try again.
 Script var canvas = document. getElementById ('canvas '); var H = 300, W = 500; btn. onclick = function () {getbils ();} getbils (); function getbils () {canvas. height = H; if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <50; I ++) {var tempR = Math. floor (Math. random () * 255); var tempG = Math. floor (Math. random () * 255); var tempB = Math. floor (Math. random () * 255); cxt. fillStyle = 'rgb ('+ tempR +', '+ tempG +', '+ tempB +') '; var tempW = Math. floor (Math. random () * W); var tempH = Math. floor (Math. random () * H); var tempR = Math. floor (Math. random () * 50); cxt. beginPath (); cxt. arc (tempW, tempH, tempR, 0, Math. PI * 2); cxt. fill () ;}} script

Random motion

Then, the 50 balls perform random motion, and the timer must be used to update the motion of the ball. At this time, you need to rewrite the above Code

Update
 
  
The current browser does not support canvas. Change the browser and try again.
 Script btn. onclick = function () {history. go ();} var canvas = document. getElementById ('canvas '); // store the canvas width and height var H = 300, W = 500; // store the number of small balls var NUM = 50; // store the small ball var bils = []; function getbils () {if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <NUM; I ++) {var tempR = Math. floor (Math. random () * 255); var tempG = Math. floor (Math. random () * 255); var tempB = Math. floor (Math. random () * 255); var tempColor = 'rgb ('+ tempR +', '+ tempG +', '+ tempB +') '; var tempX = Math. floor (Math. random () * W); var tempY = Math. floor (Math. random () * H); var tempR = Math. floor (Math. random () * 30 + 20); var tempBall = {x: tempX, y: tempY, r: tempR, stepX: Math. floor (Math. random () * 4-2), stepY: Math. floor (Math. random () * 4-2), color: tempColor, disX: Math. floor (Math. random () * 3-1), disY: Math. floor (Math. random () * 3-1)}; bils. push (tempBall) ;}}} function updatebils () {for (var I = 0; I <bils. length; I ++) {bils [I]. stepY + = bils [I]. disY; bils [I]. stepX + = bils [I]. disX; bils [I]. x + = bils [I]. stepX; bils [I]. y + = bils [I]. stepY ;}} function renderbils () {// reset the canvas height to clear the canvas. height = H; if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <bils. length; I ++) {cxt. beginPath (); cxt. arc (bils [I]. x, bils [I]. y, bils [I]. r, 0, 2 * Math. PI); cxt. fillStyle = bils [I]. color; cxt. closePath (); cxt. fill () ;}} getbils (); clearInterval (oTimer); var oTimer = setInterval (function () {// update the ball motion status updatebils (); // render the ball renderbils () ;}, 50); script

Hitting wall Detection

Next, we will add the ball hitting detection function. When the ball hits the wall, it will change to the opposite direction.

Function bumpTest (ele) {// left-side if (ele. x <= ele. r) {ele. x = ele. r; ele. stepX =-ele. stepX;} // if (ele. x> = W-ele. r) {ele. x = W-ele. r; ele. stepX =-ele. stepX;} // if (ele. y <= ele. r) {ele. y = ele. r; ele. stepY =-ele. stepY;} // lower side if (ele. y> = H-ele. r) {ele. y = H-ele. r; ele. stepY =-ele. stepY ;}}

Update
 
  
The current browser does not support canvas. Change the browser and try again.
 Script btn. onclick = function () {history. go ();} var canvas = document. getElementById ('canvas '); // store the canvas width and height var H = 300, W = 500; // store the number of small balls var NUM = 30; // store the small ball var bils = []; function getbils () {if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <NUM; I ++) {var tempR = Math. floor (Math. random () * 255); var tempG = Math. floor (Math. random () * 255); var tempB = Math. floor (Math. random () * 255); var tempColor = 'rgb ('+ tempR +', '+ tempG +', '+ tempB +') '; var tempR = Math. floor (Math. random () * 30 + 20); var tempX = Math. floor (Math. random () * (W-tempR) + tempR); var tempY = Math. floor (Math. random () * (H-tempR) + tempR); var tempBall = {x: tempX, y: tempY, r: tempR, stepX: Math. floor (Math. random () * 13-6), stepY: Math. floor (Math. random () * 13-6), color: tempColor}; bils. push (tempBall) ;}}} function updatebils () {for (var I = 0; I <bils. length; I ++) {bils [I]. x + = bils [I]. stepX; bils [I]. y + = bils [I]. stepY; bumpTest (bils [I]) ;}} function bumpTest (ele) {// left if (ele. x <= ele. r) {ele. x = ele. r; ele. stepX =-ele. stepX;} // if (ele. x> = W-ele. r) {ele. x = W-ele. r; ele. stepX =-ele. stepX;} // if (ele. y <= ele. r) {ele. y = ele. r; ele. stepY =-ele. stepY;} // lower side if (ele. y> = H-ele. r) {ele. y = H-ele. r; ele. stepY =-ele. stepY ;}} function renderbils () {// reset the canvas height to clear the canvas. height = H; if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <bils. length; I ++) {cxt. beginPath (); cxt. arc (bils [I]. x, bils [I]. y, bils [I]. r, 0, 2 * Math. PI); cxt. fillStyle = bils [I]. color; cxt. closePath (); cxt. fill () ;}} getbils (); clearInterval (oTimer); var oTimer = setInterval (function () {// update the ball motion status updatebils (); // render the ball renderbils () ;}, 50); script

Overlapping Effect

The merging attribute globalCompositeOperation of canvas indicates how the drawing is combined with the drawing first. The attribute value is a string and the possible values are as follows:

Source-over, the other parts of the two are completely transparent. source-out: the figure drawn after is visible to the part that does not overlap the first drawing. The first drawing is completely transparent. source-atop: after the drawing and the first drawing overlapping part of the visible, the first drawing is not affected destination-over: After the drawing is located below the first drawing, destination-in: the post-rendered image is visible only in the previous transparent pixels. The post-rendered image is located below the first-drawn image. The non-overlapping parts of the two are completely transparent destination-out: the part of the previously drawn image that overlaps the previously drawn image destination-atop: the previously drawn image is located below the previously drawn image, where the two do not overlap, the first drawing will become transparent lighter: the value of the overlapping part of the drawn drawing and that of the first drawing will be added to make the part light copy: the previously drawn image completely replaces the previously drawn image. xor: the previously drawn image overlaps with the previously drawn image to perform the "xor" operation.

Add the overlapping effect of the ball to 'xor', which is the final effect display.

Transform
 
  
The current browser does not support canvas. Change the browser and try again.
 Script btn. onclick = function () {history. go ();} var canvas = document. getElementById ('canvas '); // store the canvas width and height var H = 300, W = 500; // store the number of small balls var NUM = 30; // store the small ball var bils = []; function getbils () {if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <NUM; I ++) {var tempR = Math. floor (Math. random () * 255); var tempG = Math. floor (Math. random () * 255); var tempB = Math. floor (Math. random () * 255); var tempColor = 'rgb ('+ tempR +', '+ tempG +', '+ tempB +') '; var tempR = Math. floor (Math. random () * 30 + 20); var tempX = Math. floor (Math. random () * (W-tempR) + tempR); var tempY = Math. floor (Math. random () * (H-tempR) + tempR); var tempBall = {x: tempX, y: tempY, r: tempR, stepX: Math. floor (Math. random () * 21-10), stepY: Math. floor (Math. random () * 21-10), color: tempColor}; bils. push (tempBall) ;}}} function updatebils () {for (var I = 0; I <bils. length; I ++) {bils [I]. x + = bils [I]. stepX; bils [I]. y + = bils [I]. stepY; bumpTest (bils [I]) ;}} function bumpTest (ele) {// left if (ele. x <= ele. r) {ele. x = ele. r; ele. stepX =-ele. stepX;} // if (ele. x> = W-ele. r) {ele. x = W-ele. r; ele. stepX =-ele. stepX;} // if (ele. y <= ele. r) {ele. y = ele. r; ele. stepY =-ele. stepY;} // lower side if (ele. y> = H-ele. r) {ele. y = H-ele. r; ele. stepY =-ele. stepY ;}} function renderbils () {// reset the canvas height to clear the canvas. height = H; if (canvas. getContext) {var cxt = canvas. getContext ('2d '); for (var I = 0; I <bils. length; I ++) {cxt. beginPath (); cxt. arc (bils [I]. x, bils [I]. y, bils [I]. r, 0, 2 * Math. PI); cxt. fillStyle = bils [I]. color; cxt. globalCompositeOperation = 'xor'; cxt. closePath (); cxt. fill () ;}} getbils (); clearInterval (oTimer); var oTimer = setInterval (function () {// update the ball motion status updatebils (); // render the ball renderbils () ;}, 50); script

For more articles about the canvas dynamic ball overlap effect, please follow the PHP Chinese network!