怎么用JavaScript绘制圆形?
1、打开NotePad,打开菜单栏的“运行”的下拉列表框,修改快捷键,把IE后面的快捷键改为“Ctrl+Num0”。
Num0指的是小键盘里面的数字键0。
当然,你不改也可以,只不过组合键有四个键;
你也可以使用别的浏览器。
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>
3、然后点击组合键“Ctrl+0”,就可以在IE浏览器里面看到图片。
4、控制画布的大小——500*365,无边界:
#drawing {
width: 500px;
height: 365px;
}
5、画布的边框定为3个像素的粗度:
#drawing {
width: 500px;
height: 365px;
border:3px solid;
}
6、把画布填充为灰色背景:
#drawing {
width: 500px;
height: 365px;
border:3px solid;
background-color:gray;
}
7、圆的位置:
距离画布左边500像素,距离顶端180像素;
此时的圆已经超出画布的界限了。
8、改变圆的大小和颜色。