怎么用JavaScript绘制圆形?

2025-10-24 00:22:18

1、打开NotePad,打开菜单栏的“运行”的下拉列表框,修改快捷键,把IE后面的快捷键改为“Ctrl+Num0”。

Num0指的是小键盘里面的数字键0。

当然,你不改也可以,只不过组合键有四个键;

你也可以使用别的浏览器。

怎么用JavaScript绘制圆形?

2、把下面的代码复制到NotePad里面。

<!DOCTYPE html>  

<html>  

<head>  

<style>  

    #drawing {

        width: 500px;

        height: 365px;

        border:1px solid;

    }

    .circle {

        background-color: blue;

        position: absolute;

    }

</style>

</head>

<body>

    <div id="drawing">

        <div class="circle" style="width: 50px; height: 50px; border-radius: 25px; left: 200px; top: 180px;"></div>

    </div>

</body>

</html>

怎么用JavaScript绘制圆形?

3、然后点击组合键“Ctrl+0”,就可以在IE浏览器里面看到图片。

怎么用JavaScript绘制圆形?

4、控制画布的大小——500*365,无边界:

    #drawing {  

        width: 500px;  

        height: 365px;

    } 

怎么用JavaScript绘制圆形?

5、画布的边框定为3个像素的粗度:

    #drawing {  

        width: 500px;  

        height: 365px;

        border:3px solid;

    }

怎么用JavaScript绘制圆形?

怎么用JavaScript绘制圆形?

6、把画布填充为灰色背景:

    #drawing {  

        width: 500px;  

        height: 365px;

border:3px solid;

background-color:gray;

    } 

怎么用JavaScript绘制圆形?

怎么用JavaScript绘制圆形?

7、圆的位置:

距离画布左边500像素,距离顶端180像素;

此时的圆已经超出画布的界限了。

怎么用JavaScript绘制圆形?

怎么用JavaScript绘制圆形?

8、改变圆的大小和颜色。

怎么用JavaScript绘制圆形?

怎么用JavaScript绘制圆形?

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢