基于canvas的鼠标画图功能

发表于 | 更新于 | 分类于 ， ， | 阅读次数：
本文字数： 2.3k | 阅读时长 ≈ 2 分钟

在别人的前端demo中看到了鼠标画图这一项目，略感兴趣，于是读其代码，实现其功能。

点此体验

用鼠标画图的功能不是很难，原代码将html、css、javascript全部放在一份文档里都不算长。为了更好的阅读，我将其分成了三份。

html

在<head>标签中引用css和javascript代码
在<body>标签中构造按钮区域以及canvas画布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>鼠标画图</title>
 <script src="mouseDraw.js"></script>
 <link rel="stylesheet" href="mouseDraw.css"/>
</head>
<body>
 <div id="button">
  <input type="button" value="重画"/>
 </div>
 <!--定义画布元素，宽高要写在标签里。
     若在css文件设置，虽然canvas标签的大小会正常显示，绘制的图形则会按照缺省宽高比例放大缩小，缺省的高度是300px，宽度是150px-->
 <canvas id="can" width="500px" height="500px"></canvas>
</body>
</html>

css

无解说

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*允许中文字符*/
@charset "utf-8";
body{
 background: #CCC;
 text-align: center;
}
#button{
 margin: 50px auto;
 width: 200px;
}
#can{
 background: white;
 margin-top: -50px;
 display: inline-block;
}

javascript

1.创建画布
2.获取按键元素，并赋予清除功能
3.画布中实现画图功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
window.onload=function(){
 //获取<canvas>元素
 var can=document.getElementById("can");
 //创建画布对象
 var con=can.getContext("2d");
 //获取按键元素，此处是通过标签名得到的变量，是数组变量
 var inp=document.getElementsByTagName("input");
 //清空画布.canvas每当高度或宽度被重设时，画布内容就会被清空,（此方法仅限需要清除全部内容的情况）
 inp[0].onclick=function(){
  can.width=can.width;
 }
 //当用户按下鼠标按钮执行Javascript代码
 can.onmousedown=function(ev){
  //兼容各个浏览器。
  //在FireFox浏览器中，事件绑定的函数要获取到事件本身，需要从函数中传入，而IE等浏览器则可以直接使用event或者window.event得到事件本身。
  var ev=ev||event;
  /* moveTo:定义一个起点
    client系列:可视区域
    clientX： 相对文档的水平坐标
    clientY： 相对文档的垂直坐标
    offsetLeft： 对象相对于版面或由 offsetParent 左侧位置
    offsetTop：对象相对于版面或由 offsetTop 顶端位置
  */
//document.write(ev.clientX-can.offsetLeft);
  con.moveTo(ev.clientX-can.offsetLeft,ev.clientY-can.offsetTop);
  //当鼠标指针移动到图像上时执行一段Javascript代码
  document.onmousemove=function(ev){
   var ev=ev||event;
   //lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。
   con.lineTo(ev.clientX-can.offsetLeft,ev.clientY-can.offsetTop);
   //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
   con.stroke();
  }
  //当鼠标释放时执行一段Javascript代码
  document.onmouseup=function(){
   //鼠标释放后这些事件不再触发函数
   document.onmousedown=document.onmousemove=null;
  }
 }
}

尚需改进之处

1.该清除为擦除
2.改变画笔颜色大小等属性
3.改变画布大小
4.待定