js三种方式实现正金字塔【2021.11.4】

最新推荐文章于 2024-05-08 11:26:19 发布

轻盈的风

最新推荐文章于 2024-05-08 11:26:19 发布

阅读量989

点赞数 1

文章标签： javascript html html5

本文链接：https://blog.csdn.net/masierty/article/details/121153520

版权

第一种利用空格和*出现的规律
第二种利用display居中
第三种利用坐标系

<!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>Document</title>
    <style>
        .divYa{
            display: inline-block;
        }
        .therDiv{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #canvas{
            border: 5px black solid;
        }
    </style>
</head>
<body>
    <div id="oneDiv"></div>

    <p>&nbsp;&nbsp;&nbsp;&nbsp;*</p>
    <p>&nbsp;&nbsp;***</p>
    <p>*****</p>
    <!-- 空格的规律的max*2-2依次递减 -->

    <canvas id="canvas" width="500" height="500">

    </canvas>
</body>
<script>
    let onDiv = document.querySelector('#oneDiv');
    let twoDiv = document.querySelector('#twoDiv');
    
    for(var i =1;i<10;i++){
        for(var j =0;j<i;j++){
             onDiv.innerHTML+="<div class='divYa'>*</div>";
        }
        onDiv.innerHTML+="</br>";
    }
    //第一种利用空格和*出现的规律
    for(var i =0;i<=10;i++){
        for(var j =1;j<=10-i;j++){
             document.write("&nbsp;&nbsp;");//规律max*2依次递减
        }
        for(var n = 1;n<=2*i-1;n++){//*规律2x-1
        document.write("*");
        }
        document.write("</br>");
    }
    //第二种利用display居中
    document.write("<div class='therDiv'>");
    for(var i =0;i<=10;i++){
        document.write("<div class='forDiv'>");
        for(var n = 1;n<=2*i-1;n++){
        document.write("❤");
        }
        document.write("</div>");
    }
    document.write("</div>");
    //第三种利用坐标系
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var ctx = canvas.getContext('2d');
    var w=500;
    var h=500;
    ctx.translate(w / 2, h / 2);
    ctx.rotate(Math.PI);

    let drawCircular = function(x,y){
    ctx.beginPath();
    ctx.fillStyle="red";
    ctx.arc(x,y,3,0,Math.PI*2);
    ctx.fill();
    ctx.closePath();
    }
    
    let drawPyr = function(x){
        var z =x-1;
    for(var y=0;y<=z*6;y+=6){
        for(var x =0;x<=z*6-y;x+=6){
            drawCircular(x,y);
            drawCircular(-x,y);
        }
    }
    }
    //z是控制最后一排对称轴两边的个数，2z+1==2x-1，x=z+1
    drawPyr(18);//输入层数
   
</script>
</html>

轻盈的风

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js三种方式实现正金字塔【2021.11.4】

第一种利用空格和*出现的规律第二种利用display居中第三种利用坐标系<!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, i
复制链接

扫一扫