快捷導(dǎo)航

JavaScript實(shí)現(xiàn)鼠標(biāo)移動事件畫筆

更新時間：2022年08月23日 11:38:24 作者：可可鴨~

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)移動事件畫筆，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript實(shí)現(xiàn)鼠標(biāo)移動事件畫筆小游戲，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)功能

鼠標(biāo)點(diǎn)擊時可以在畫板上畫畫
如果鼠標(biāo)雙擊那么停止
移動進(jìn)畫板顏色改變移除時顏色改變

<!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.鼠標(biāo)點(diǎn)擊時可以在畫板上畫畫
? ? ? ? 如果鼠標(biāo)雙擊那么停止
? ? ? ? 移動進(jìn)畫板顏色改變移除時顏色改變
? ? ? ? */
? ? ? 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>

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序wxs日期時間處理的實(shí)現(xiàn)示例
最近在做一個列表的時候，涉及到時間格式化操作。本文主要介紹了微信小程序wxs日期時間處理的實(shí)現(xiàn)示例，分享給大家，感興趣的可以了解一下
2021-07-07
JS實(shí)現(xiàn)的四級密碼強(qiáng)度檢測功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的四級密碼強(qiáng)度檢測功能,具有實(shí)時檢測輸入密碼強(qiáng)度的功能,涉及javascript針對字符串的正則判定相關(guān)操作技巧,需要的朋友可以參考下
2017-05-05
webpack 模塊熱替換原理
這篇文章主要介紹了webpack 模塊熱替換原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
前端項(xiàng)目npm?install?安裝依賴報錯的解決方案(三種問題解決方案)
本文給大家介紹前端項(xiàng)目npm?install?安裝依賴報錯的解決方案(三種問題解決方案)，給大家總結(jié)了前端項(xiàng)目安裝依賴,遇到過的問題,每一種問題給大家完美解決方案,感興趣的朋友一起看看吧
2023-12-12
巧用Javascript的邏輯運(yùn)算符
本篇文章主要介紹了Javascript邏輯運(yùn)算符"或"的巧用實(shí)例，希望對大家有所幫助，下面就隨小編一起來看看吧
2016-12-12
javascript 對象與 prototype 原型用法實(shí)例分析
這篇文章主要介紹了javascript 對象與 prototype 原型用法,結(jié)合實(shí)例形式分析了javascript 對象與 prototype 原型實(shí)現(xiàn)對象創(chuàng)建、繼承、拷貝等相關(guān)操作技巧,需要的朋友可以參考下
2019-11-11
DIV+CSS+JS 變灰彈出層
javascript 彈出層效果代碼。需要的朋友可以測試下。
2009-10-10
JavaScript最全公共方法匯總并解析（前端開發(fā)收藏必備）
JavaScript掌握各種常用的公共方法更是提升開發(fā)效率和代碼質(zhì)量的關(guān)鍵,無論你是初學(xué)者還是資深開發(fā)者,了解并熟練運(yùn)用這些方法都能讓你的代碼更加簡潔、高效,本篇博客將為你詳細(xì)匯總并解析最全的JavaScript公共方法,涵蓋數(shù)組、對象、字符串、日期等各個方面的常用技巧
2024-06-06
JavaScript中閉包的詳解
本文主要介紹了JavaScript中閉包的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04
JS實(shí)現(xiàn)萬億數(shù)字轉(zhuǎn)中文的代碼詳解
在軟件開發(fā)中,尤其是在中文處理的場景中,數(shù)字與語言的轉(zhuǎn)換是一個常見且具有挑戰(zhàn)性的任務(wù),在一些業(yè)務(wù)系統(tǒng)中,可能需要將阿拉伯?dāng)?shù)字轉(zhuǎn)換為中文數(shù)字,本文將介紹如何使用 JavaScript 將數(shù)字轉(zhuǎn)換成中文,幫助開發(fā)者為相關(guān)的需求提供實(shí)現(xiàn)思路,需要的朋友可以參考下
2024-12-12