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>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javaScript canvas实现(画笔大小 颜色 橡皮的实例)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div> <div> <!--<input type="button" id="open" value="open&q

  • javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

    js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. 复制代码 代码如下: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascri

  • js模拟画笔效果

    模拟画笔效果 var ballW = 10,ballH = 10; document.onmousemove = function(evt){ var evt=evt?evt:window.event; var posX=evt.clientX; var posY=evt.clientY; var newDiv=document.createElement("div"); document.body.appendChild(newDiv); newDiv.style.width=bal

  • JavaScript实现鼠标移动事件画笔

    JavaScript实现鼠标移动事件画笔

    JavaScript实现鼠标移动事件画笔小游戏,供大家参考,具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width

  • 解析javascript中鼠标滚轮事件

    解析javascript中鼠标滚轮事件

    所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间.浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作.有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行.除了Firefox之外的所有浏览器都支持"mousewheel"事件,但Firefox使用"DOMMouseScroll",而3级DOM事件规范草案建议使用事件名"wheel"替代"mousewheel". d

  • javascript 兼容鼠标滚轮事件

    这个事件在标准下和IE下是有区别的.firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel ".当然一行代码就解决了兼容问题 复制代码 代码如下: var mousewheel = document.all?"mousewheel":"DOMMouseScroll"; 事件属性,IE是event.wheelDelta,Firefox是event.detail 属性的方向

  • JavaScript鼠标悬停事件用法解析

    鼠标悬停事件是当鼠标的光标与其名称表示的元素重叠时触发的事件,本篇文章我们就来详细介绍一下JavaScript中鼠标悬停事件的用法. 我们先来看一下什么是onmouseover? 鼠标悬停的活动是"事件",而onmouseover是事件处理程序. 事件处理程序是指定事件发生时要执行的进程所必需的. 所以onmouseover是一个事件处理程序,负责当鼠标的光标悬停在某个元素上时完成的处理. 什么是onmouseleave? 除了onmouseover之外,还有onmouseleave.

  • JavaScript和JQuery的鼠标mouse事件冒泡处理

    简单的鼠标移动事件: 进入 复制代码 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 复制代码 代码如下: mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题

  • javascript监听鼠标滚轮事件浅析

    我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

  • 学习JavaScript鼠标响应事件

    学习JavaScript鼠标响应事件

    本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下 如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型. 效果图: HTML代码: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link r

  • JavaScript常见鼠标事件与用法分析

    JavaScript常见鼠标事件与用法分析

    本文实例讲述了JavaScript常见鼠标事件与用法.分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下. mouseup 鼠标的键钮释放弹起. click 鼠标左键(或中键)被单击. 事件触发顺序是:mousedown -> mouseup -> click dblclick 鼠标左键(或中键)被双击. 事件触发顺序是:mousedown -> mouseup -> click -> mousedown ->

  • javascript实现禁止鼠标滚轮事件

    平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力.而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了.除了火狐之外,所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应.但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容.也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll.而非火狐则只能使用MouseWheel.这两种事件实现的原理不同,他们

  • 基于JavaScript获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标 相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. functi

随机推荐