canvas教程8-小球连线之碰壁则返

最新推荐文章于 2022-03-02 15:09:24 发布

梦幻之光_dream

最新推荐文章于 2022-03-02 15:09:24 发布

阅读量477

点赞数

分类专栏： Web前端开发文章标签： canvas

本文链接：https://blog.csdn.net/William_fang/article/details/119188705

版权

Web前端开发专栏收录该内容

108 篇文章 10 订阅

订阅专栏

文章目录

一.反弹球的无规则运动与连线
二.效果图
篇章

一.反弹球的无规则运动与连线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反弹球的无规则运动与连线</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas{
            display: block;
            border: 1px solid black;
            margin: 5px auto;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
</html>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //画布的尺寸
    canvas.width = document.documentElement.clientWidth - 30; //-30是为了不超出屏幕的范围
    canvas.height= document.documentElement.clientHeight - 30;

    function Ball(){
        this.x = parseInt(Math.random() * canvas.width);
        this.y = parseInt(Math.random() * canvas.height);
        this.r = 10;
        this.color = "grey";
        //设置行进方向
        this.dx = parseInt(Math.random() * 10) - 5;
        this.dy = parseInt(Math.random() * 10) - 5;
        ballArr.push(this);

        //连线---自己在数组中的位置记录一下
        this.index = ballArr.length - 1;
     
    }
    //小球的更新
    Ball.prototype.update = function(){
        this.x += this.dx;
        this.y += this.dy; 
        //当小球出屏幕反弹，判断小于this.r是为了判断当前是否出屏幕。
        if(this.x < this.r || this.x > canvas.width - this.r){
            this.dx =  -this.dx;
        }
        if(this.y < this.r || this.y > canvas.height - this.r){
            this.dy =  -this.dy;
        }
    };
    //小球的渲染
    Ball.prototype.render = function(){
        ctx.beginPath();
        //透明度：它的值是0~1之间。
        ctx.globalAlpha = 1;
        //画小球
        ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false); 
        ctx.fillStyle = this.color;
        ctx.fill();

        //连线---画线的逻辑
        //画线只画比自己大的那一方就可以了，否则就是每一次2根线,效果也会不美观。
        for(var i = this.index; i < ballArr.length; i++){
            if(Math.abs(ballArr[i].x - this.x) < 150 && Math.abs(ballArr[i].y - this.y) < 150){
                ctx.strokeStyle = "#000";
                ctx.beginPath();
                //增加线的透明度，根据当前的2个已经连线的小球的距离进行线的透明度设置
                ctx.globalAlpha = 10 / Math.sqrt(Math.pow(ballArr[i].x - this.x, 2)+Math.pow(ballArr[i].y - this.y, 2));
                ctx.moveTo(this.x,this.y);
                ctx.lineTo(ballArr[i].x,ballArr[i].y);
                ctx.closePath();
                ctx.stroke();
            }
        }
    };
    var ballArr = [];
    //创建20个小球
    for(var i = 0;i < 20;i++){
        new Ball();
    };
    //定时器动画
    setInterval(function(){
        //清除画布
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i = 0; i < ballArr.length; i++){
            ballArr[i].update(); //更新
            ballArr[i].render(); //渲染
        }
    },20);
</script>

二.效果图

在这里插入图片描述

篇章

上一篇：canvas教程7-炫彩小球

下一篇：canvas教程9-线型的属性

梦幻之光_dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas教程8-小球连线之碰壁则返

文章目录一.反弹球的无规则运动与连线二.效果图篇章一.反弹球的无规则运动与连线<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, in
复制链接

扫一扫