按下鼠标拖拽绘画

最新推荐文章于 2023-03-15 10:58:22 发布

最新推荐文章于 2023-03-15 10:58:22 发布

阅读量112

点赞数

分类专栏： html css js jq 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Vue1024/article/details/122330435

版权

html css js jq 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

按下鼠标拖拽绘画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
			
		</style>
	</head>
	<body>
	
	</body>
</html>
<script>

	document.onmousedown = function(evt){
		document.body.onmousemove=function(evt){
			var d=document.createElement("div");
			var e = evt ;
			d.style.width="10px";
			d.style.height="10px";
			d.style.background=colorwehe();
			d.style.borderRadius="50%";
			d.style.position="absolute";
			document.body.appendChild(d);
			d.style.left = e.clientX + "px";
			d.style.top = e.clientY  + "px";
            console.log("dsfd");
		}
	}
    //自定义颜色
		function colorwehe() {
			var  a = Math.floor(Math.random() *256);
			b = Math.floor(Math.random() * 256);
			c = Math.floor(Math.random() * 256)
			return "rgb(" + a + "," + b + "," + c +")"
		}
    document.onmouseup = function(evt){
        document.body.onmousemove = null
    }
</script>