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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
查看更多关于JavaScript实现鼠标移动事件画笔的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did121912