js实现黑白div块画空心的矩形、三角形、菱形、圆形

最新推荐文章于 2024-09-05 14:01:36 发布

巴依尔13

最新推荐文章于 2024-09-05 14:01:36 发布

阅读量4.1k

点赞数

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

本文链接：https://blog.csdn.net/wds207207/article/details/70306221

版权

本文介绍了如何使用JavaScript在HTML的div元素中绘制空心的矩形、三角形、菱形和圆形。通过JavaScript的canvas API，详细讲解了每个图形的绘制步骤和关键代码，帮助开发者实现动态图形效果。

摘要由CSDN通过智能技术生成

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>starts picture</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<script type="text/javascript">

    /* 打印实心矩形，思路：两个for循环嵌套，外面for循环 + 换行符实现打印n行；
                            内部for循环实现打印n个星号； */

    function juxing(n){
                 //打印矩形，传入参数为行数（矩形高），作用域预解析时会声明传入参数，无需                                   var n = a; 声明多余的变量
        for(var i=1; i<=n; i++){
            for(var j=1; j<=n; j++){        //for循环嵌套实现，每行打印n个'*';
                document.write('<div class="black"></div>');
            }
            document.write('<br/>');        //打印换行符，实现换行,不然全部在一行
        }
    }
    juxing(4);




    /* 打印空心矩形，
        ****
        *  *
        *  *
        ****
        思路：内部for循环打印信号时加上序号判断，
        具体情况：
            1、第一行 或 最后一行的所有序号  打印星号
            2、第二行至倒数第二行的第一个序号 或 最后一个序号  打印星号
            3、第二行至倒数第二行中间全部序号  打印空格

            '&nbsp;' 注意HTML中字符实体都是以 &开头 ;结尾 */

    function kongxinjuxing(n){
    
        for(var i=1; i<=n; i++){
            for(var j=1; j<=n; j++){
                if(i==1 || i==n){               
                    document.write('<div class="black"></div>');
                }else if(j==1 || j==n){
                    document.write('<div class="black"></div>');
                }else{
                    document.write('<div class="w