Tea9源码网 - 免费分享精品源码、教程、软件|全网干货资源收集,免费下载。

[代码分享]用HTML 5 Canvas实现球体碰撞效果

发布:资源收集工2021-7-8 6:31分类: 技术教程 标签: HTML5 Canvas 球体碰撞

作者写出的均是根据所学的知识写的原生态的js代码! 为了锻炼自己的码代码能力!页面均由JS动态生成! ps:有同学可能要套用我的画布坐标,请注意要清除body样式。

[代码分享]用HTML 5 Canvas实现球体碰撞效果

HTML代码


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                margin: 0px;
            }
        </style>
    </head>
    <body>
         
    </body>
</html>

JS代码


<script type="text/javascript" language="javascript">
window.onload=function () {
    // 创建画布
    var canvas=document.createElement('canvas');
    var brush=canvas.getContext("2d");
        canvas.style.border="2px solid #aaaaaa";
        canvas.width=700;
        canvas.height=700;
 
    // 包裹画布居中
    var box=document.createElement('div');
        // box样式
        box.style.width=canvas.width+"px";
        box.style.height=canvas.height+"px";
        box.style.margin="100px auto";
 
    // 移动块
    var move=document.createElement('span');
        // move样式
        move.style.color="#ff0000";
        move.style.position="absolute";
        move.style.display="none";
        move.style.boxShadow="1px 1px 8px red";
 
    // 添加对象
    document.body.appendChild(box);
    document.body.appendChild(move);
    box.appendChild(canvas);
 
        // 避免重复获取画布大小
        var Ox=canvas.offsetLeft;
        var Oy=canvas.offsetTop;
        move.style.display="none";
 
    function mymove (event) {
        move.style.display="block";
        move.style.left=event.pageX-50+"px";
        move.style.top=event.pageY-50+"px";
        move.innerHTML="当前画布坐标:"+(event.clientX-Ox-2)+","+(event.clientY-Oy-2);
    }
 
    function myout () {
        move.style.display="none";
    }
 
    canvas.onmousemove=mymove;
    canvas.onmouseout=myout;
    brush.translate(350,350);
 
    var x=parseInt(Math.random()*330);//初始坐标
    var y=parseInt(Math.random()*330);//初始坐标
    var target_x=parseInt(Math.random()*40-20);//x坐标改变值
    var target_y=parseInt(Math.random()*40-20);//y坐标改变值
    function action() {
        brush.clearRect(-350,-350,700,700);
        brush.beginPath();
        brush.fillStyle="red";
        brush.arc(x,y,20,0,Math.PI*2);
        brush.fill();
        if (x>=330 || x<=-330) {
            target_x=-target_x;
        }
        if (y>=330 || y<=-330) {
            target_y=-target_y;
        }
        x+=target_x;
        y+=target_y;
    }
    setInterval(action,100);
}
</script>
温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

已有 2672 人阅读