绘制带有随机颜色的鼠标拖拽圆形

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title></title>
<style>
#circle {
border: 1px solid;
background-color: green;
border-radius: 50%;
position: absolute;
}
</style>
<script language=”JavaScript”>
var prex, prey;
var div;
var isMousedown = false;

function randomColor() {
return ‘#’ +
(function (color) {
return (color += ‘0123456789abcdef'[Math.floor(Math.random() * 16)])
&& (color.length == 6) ? color : arguments.callee(color);
})(”);
}

function mousedown() {
isMousedown = true;
ev = window.event;
var x = ev.pageX;
var y = ev.pageY;
var body = document.body;
div = document.createElement(“div”);
div.id = “circle”;
prex = x;
prey = y;
div.style.top = y + “px”;
div.style.left = x + “px”;
div.style.backgroundColor=randomColor();
}

function mouseup() {
isMousedown = false;
ev = window.event;
var x = ev.pageX;
var y = ev.pageY;
var body = document.body;
div.style.width = (x – prex) + “px”;
div.style.height = ( y – prey) + “px”;
body.appendChild(div);
}

function mousemove() {
if (isMousedown) {
ev = window.event;
var x = ev.pageX;
var y = ev.pageY;
var body = document.body;
div.style.width = (x – prex) + “px”;
div.style.height = ( y – prey) + “px”;
body.appendChild(div);
}
}
document.onmousemove = mousemove;
document.onmousedown = mousedown;
document.onmouseup = mouseup;

</script>
</head>
<body>
</body>
</html>

发表评论

邮箱地址不会被公开。 必填项已用*标注