Canvas基础6-将随机的点用直线互连

最新推荐文章于 2022-01-23 03:16:28 发布

hf188680

最新推荐文章于 2022-01-23 03:16:28 发布

阅读量1.1k

点赞数

分类专栏： Canvas

本文链接：https://blog.csdn.net/justdoitflyer/article/details/8930028

版权

Canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!--gtgame.html-->
<!DOCTYPE html>
<html>
<head>
    <title>WebChat JieTiGame</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/untangle.css" />


</head>
<body>
    <canvas id="game" width="768" height="400">
        <!--Sorry,your web browser does not support Canvas context.-->
    </canvas>


    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/html5game.untangle.js"></script>


</body>
</html>

/*untangle.css*/


canvas{
    display:block;
    /*background-color:lightgreen;*/
}


*{
    margin:0;
    padding:0;
}


html,body{
    height:100%;
    width:100%;
}

//html5game.untangle.js


//定义circle对象
function Circle(x,y,radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}
//同理
function Line(startPoint, endPoint, thickness){
    this.startPoint = startPoint;
    this.endPoint = endPoint;
    this.thickness = thickness;
}


var untangleGame = {
    circles: [],
    thinLineThickness: 1,
    lines: []
};


function drawLine(ctx, x1, y1, x2, y2, thickness){
    ctx.beginPath();
    ctx.moveTo(x1,y1);
    ctx.lineTo(x2,y2);
    ctx.lineWidth = thickness;
    ctx.strokeStyle = "black";
    ctx.stroke();
}


function drawCircle(ctx,x,y,radius){
    ctx.fillStyle = "rgba(200,100,200,.8)";
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
}


$(document).ready(function(){
    var canvas = $("#game");
    var ctx = canvas.get(0).getContext("2d");
    var circleRadius = 10;


    $(window).resize(resizeCanvas);
    function resizeCanvas(){
        canvas.attr("width",$(window).get(0).innerWidth);
        canvas.attr("height",$(window).get(0).innerHeight);
        ctx.strokeRect(0,0,canvas.width(),canvas.height());
        var width = canvas.get(0).width - 20;
        var height = canvas.get(0).height - 20;
        //随机的5个圆
        var circlesCount = 5;
        for (var i=0; i<circlesCount; i++){
            var x =10 + Math.random()*width;
            var y =10 + Math.random()*height;
            drawCircle(ctx,x,y,circleRadius);
            untangleGame.circles.push(new Circle(x,y,circleRadius));
        }


        for (var i=0; i<untangleGame.circles.length; i++){
            var startPoint = untangleGame.circles[i];
            for(var j=0; j<i; j++){
                var endPoint = untangleGame.circles[j];
                drawLine(ctx,startPoint.x,startPoint.y,endPoint.x,endPoint.y,1);
                untangleGame.lines.push(new Line(startPoint,endPoint,untangleGame.thinLineThickness));
            }
        }


    }
    resizeCanvas();
});

留下一个BUG，下面的窗口反复最大化最小化效果不是本想要的。

hf188680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas基础6-将随机的点用直线互连

WebChat JieTiGame /*untangle.css*/canvas{ display:block; /*background-color:lightgreen;*/}*{ margin:0; padding:0;}html,body{
复制链接

扫一扫