Canvas implements the effect code of dynamic ball overlapping

In the JavaScript sports series, various sports are introduced in detail, including wall sports. However, if you use canvas to implement it, it is another way of thinking. This article will introduce in detail the dynamic ball overlapping effect of canvas. Let’s take a look at it together

Previous words

In the javascript sports series, various sports are introduced in detail, including wall sports. However, if you use canvas to implement it, it is another way of thinking. This article will introduce in detail the overlapping effect of canvas dynamic balls

Static balls

First, generate 50 static balls with random radius and random position

按钮 当前浏览器不支持canvas，请更换浏览器后再试 

Random movement

Then, these 50 balls move randomly, and the movement status of the balls needs to be updated in conjunction with the timer. At this time, the above code needs to be rewritten

更新 当前浏览器不支持canvas，请更换浏览器后再试 

Block detection

Next, add the ball collision detection Function, when the ball hits the wall, it changes to the opposite direction

function bumpTest(ele){ //左侧 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; } //下侧 if(ele.y >= H - ele.r){ ele.y = H - ele.r; ele.stepY = -ele.stepY; } }

更新
         
          当前浏览器不支持canvas，请更换浏览器后再试
         

Overlapping effect

canvas的合成属性globalCompositeOperation表示后绘制的图形怎样与先绘制的图形结合，属性值是字符串，可能值如下： source-over(默认)：后绘制的图形位于先绘制的图形上方 source-in:后绘制的图形与先绘制的图形重叠的部分可见，两者其他部分完全透明 source-out:后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明 source-atop:后绘制的图形与先绘制的图形重叠的部分可见，先绘制的图形不受影响 destination-over:后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见 destination-in:后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明 destination-out:后绘制的图形擦除与先绘制的图形重叠的部分 destination-atop:后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明 lighter:后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮 copy:后绘制的图形完全替代与之重叠的先绘制图形 xor:后绘制的图形与先绘制的图形重叠的部分执行"异或"操作

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

变换
         
          当前浏览器不支持canvas，请更换浏览器后再试
         

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

canvas realizes the effect of love and rainbow rain

canvas draws various basic graphics

The above is the detailed content of Canvas implements the effect code of dynamic ball overlapping. For more information, please follow other related articles on the PHP Chinese website!