JavaScript实现鼠标移动事件画笔
更新时间：2022年08月23日 11:38:24 作者：可可鸭~
这篇文章主要为大家详细介绍了JavaScript实现鼠标移动事件画笔，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了tsconfig.json配置详解，tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
本文主要分享了canvas红包照片的实例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了js实现自定义右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了Typescript中索引签名使用详解,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了JavaScript axios安装与封装案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了写一个飞快的 JavaScript 打包压缩工具，非常好用，本文给大家分享实现思路,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了js实现时间日期校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
ajaxControlToolkit AutoCompleteExtender的用法
昨天在搜索中使用了这个控件，不过不知道为什么在IE中反应比较慢2008-10-10
发现的以前不知道的函数...2006-09-09
本文主要介绍了webpack热更新的原理及实现,,无需完全刷新整个页面的同时,更新代码变动的模块,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-06-06
最新评论