JavaScript实现鼠标移动事件画笔

来源：jb51　　时间：2022/8/23 13:27:19　　对本文有异议

JavaScript实现鼠标移动事件画笔小游戏，供大家参考，具体内容如下

实现功能

鼠标点击时可以在画板上画画
如果鼠标双击那么停止
移动进画板颜色改变移除时颜色改变

<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge" />
? ? <title>Document</title>
? </head>
? <style>
? ? * {
? ? ? margin: 0;
? ? ? padding: 0;
? ? ? box-sizing: border-box;
? ? }
? ? .drawbox {
? ? ? width: 1100px;
? ? ? height: 600px;
? ? ? background-color: skyblue;
? ? ? position: relative;
? ? }
? </style>
? <body>
? ? <div class="drawbox"></div>
? ? <script>
? ? ? /*?
? ? ? ? 1.鼠标点击时可以在画板上画画
? ? ? ? 如果鼠标双击那么停止
? ? ? ? 移动进画板颜色改变移除时颜色改变
? ? ? ? */
? ? ? var darwbox = document.querySelector("div");
? ? ? darwbox.onmouseenter = function() {
? ? ? ? darwbox.style.backgroundColor = "red";
? ? ? };
? ? ? darwbox.onmouseleave = function() {
? ? ? ? darwbox.style.backgroundColor = "skyblue";
? ? ? };
? ? ? var istrue = false;
? ? ? darwbox.onmousedown = function(e) {
? ? ? ? istrue = true;
? ? ? };
? ? ? darwbox.onmousemove = function(e) {
? ? ? ? if (istrue == true) {
? ? ? ? ? var x = e.pageX;
? ? ? ? ? var y = e.pageY;
? ? ? ? ? var circle = document.createElement("div");
? ? ? ? ? circle.style.width = "10px";
? ? ? ? ? circle.style.height = "10px";
? ? ? ? ? circle.style.backgroundColor = "#fff";
? ? ? ? ? circle.style.position = "absolute";
? ? ? ? ? circle.style.left = x - 5 + "px";
? ? ? ? ? circle.style.top = y - 5 + "px";
? ? ? ? ? circle.style.borderRadius = "50%";
? ? ? ? ?
? ? ? ? ? darwbox.appendChild(circle);
? ? ? ? }
? ? ? };
? ? ? darwbox.onmouseup = function(e) {
? ? ? ? istrue = false;
? ? ? };
? ? </script>
? </body>
</html>