这几天复习了一下js的DOM(文档对象模型),部分，看到鼠标事件的时候想到可以试着写一个js画布的案例。
一、实现思路
1.利用js绑定鼠标按下事件，鼠标放开事件，在通过鼠标移动事件，获取鼠标所在位置。
2.通过鼠标移动事件动态创建节点挂载到页面上实现鼠标移动时出现轨迹。
3.然后封装一个生成随机颜色的函数实现挂载节点时颜色为随机色。
效果图如下：
就类似一个这样鼠标点击时在页面可以实现画笔的效果。
二、代码分析部分
1. 主要分为3个鼠标事件一个随机颜色函数实现所有功能
var isDown = false;//鼠标左键是否按下
//鼠标按下事件
document.onmousedown = function (event) {
var e = event || window.event;
e.preventDefault(); //取消默认行为
if (e.which == 1) {
isDown = true;//如果按下鼠标左键，就将标识变为true
}
}
document.onmouseup = function (event) {
isDown = false;//鼠标释放时，将值变为false
}这里是鼠标按下事件和放开事件，然后这里用到了一个开关思想：首先用isDown判断鼠标左键是否被按下。
1.鼠标按下事件：给文档绑定一个鼠标事件，这里要接收一个事件对象event，然后用e接收event，这里要做一个兼容性的判断，如果没有的话就是window.event，之后阻止默认行为，这个e.which可以收集到是点击的那个键，为1的话是左键，2的话就是点击滚轮，3是鼠标右键，判断是否是点击的鼠标左键，则将开关isDown打开（true）
2.鼠标释放事件：释放时，将开关关闭（isDown=false）
2. 鼠标移动事件：动态添加节点
事件以及样式：
//鼠标移动事件
document.onmousemove = function (event) {
if (!isDown) { return }
var e = event || window.event;
e.preventDefault();
var divDom = document.createElement("div");
divDom.className = 'divDom'
divDom.style.backgroundColor = getRandomColor();
divDom.style.left = e.clientX + 'px'
divDom.style.top = e.clientY + 'px'
document.body.appendChild(divDom);
}<style>
.divDom {
width: 5px;
height: 5px;
border-radius: 3px;
position: absolute;
}
</style>首先判断开关是否关闭，如果关闭，证明鼠标释放或没有点击，然后用e接收事件对象，组织默认行为，通过创建元素节点方法创建divDom元素，绑定上类名，设置背景颜色（这里是调用的随机颜色函数,下一步讲解)，然后通过鼠标事件对象的clientX，clientY的位置将元素挂载。
3. 随机颜色函数
function getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}通过调用数学对象Math.random()函数生成[0,1）的随机数，将其乘以256,然后通过向下取整的方法得到0到255的数值，在用rgb的形式返回出去，得到一个随机的rgb值。
三、代码总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divDom {
width: 5px;
height: 5px;
border-radius: 3px;
position: absolute;
}
</style>
</head>
<body>
<script type="text/javascript">
var isDown = false;//鼠标左键是否按下
//鼠标按下事件
document.onmousedown = function (event) {
var e = event || window.event;
e.preventDefault(); //取消默认行为
if (e.which == 1) {
isDown = true;//如果按下鼠标左键，就将标识变为true
}
}
document.onmouseup = function (event) {
isDown = false;//鼠标释放时，将值变为false
}
//鼠标移动事件
document.onmousemove = function (event) {
if (!isDown) { return }
var e = event || window.event;
e.preventDefault();
var divDom = document.createElement("div");
divDom.className = 'divDom'
divDom.style.backgroundColor = getRandomColor();
divDom.style.left = e.clientX + 'px'
divDom.style.top = e.clientY + 'px'
document.body.appendChild(divDom);
}
function getRandomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看