Canvas制作双环碰撞动画效果css代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Canvas制作双环碰撞动画效果css代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas制作双环碰撞动画效果</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<br>
<div style="margin:0 auto; width:500px; height:250px;">
<canvas id = "myCanvas" width = "500px" height = "250px" style = "background-color:black;"> </canvas>
</div>
<script>
    window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var c = canvas.getContext("2d");
        var px = [35,450];
        var py = [35, 200]; 
        var add_x = [1, -1]; 
        var add_y = [1, -1];				
        var add_deg = [1, -1];
        var deg = [0, 0];
        var r = 30;	// 半径	
        var color = [getMulColor(), getMulColor()];
        
        window.setInterval(function() {
                for(var i = 0; i < 2; i++) {
                    c.save();
                    if (i === 0)
                        c.clearRect(0, 0, 500, 250);	
                    c.translate(px[i], py[i]);
                    c.rotate(deg[i] * Math.PI / 180);
                    c.beginPath();
                    c.strokeStyle = color[i];
                    c.lineWidth = 7;
                    c.arc(0, 0, r, 0, Math.PI * 2, true);
                    c.stroke();
                    
                    var crack = [];
                    crack.push(i);
                    for (var j = 0; j < 2; j++) {
                         if (i === j) continue;
                         if (dis(px[i], py[i], px[j], py[j]) <= r * 2) 
                            crack.push(j);	// 相碰的
                         }
                
                    if (crack.length > 1) {	// 有相碰的
                        for (var j = 0; j < crack.length; j++) {
                            var index = crack[j];
                            add_x[index] *= -1;
                            add_y[index] *= -1;
                            add_deg[index] *= -1;
                            }
                        }
                        
                    if (px[i] + r >= 500 || px[i] - r <= 0) add_x[i] *= -1; 
                    if (py[i] + r >= 250 || py[i] - r <= 0) add_y[i] *= -1;
                    if (px[i] + r >= 500 || px[i] - r <= 0 || py[i] + r >= 250 || py[i] - r <= 0) {
                        color[i] = getMulColor();
                        add_deg[i] *= -1;
                        }
                    px[i] += add_x[i]; py[i] += add_y[i]; deg[i] += add_deg[i];
                    c.restore();
                    }	
            }, 1);
            
        function getColor() {
            while(true) {
                var ans = Math.random();
                if (ans < 0.2) continue;
                var color = "#" + parseInt(ans * 0xffffff).toString(16);
                return color;
                }
            }
            
        function getMulColor() {
            var grd = c.createLinearGradient(-r, -r, r, r);
            grd.addColorStop(0, getColor());
            grd.addColorStop(0.2, getColor());
            grd.addColorStop(0.4, getColor());
            grd.addColorStop(0.6, getColor());
            grd.addColorStop(0.8, getColor());
            grd.addColorStop(1, getColor());
            return grd;
            }
            
        function dis(x1, y1, x2, y2) {
            var ans = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);
            return Math.sqrt(ans);
            }
        }		
</script>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body{margin:0;padding:0;background:#000000}

附件:下载该文件资源,减少时间成本(增值服务)

.rar

2.77 KB

立即下载(CNY 2.9￥)

打赏收藏

分享到QQ

分享到微博

微信扫一扫

留言

该资源可下载

.rar

2.77 KB

立即下载

孟雪

了解

打赏作者鼓励作者

Html 动画效果1