欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年08月23日 11:38:24   作者：可可鴨~  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)移動(dòng)事件畫(huà)筆，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

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

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

效果圖：

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

相關(guān)文章

最新評(píng)論