记一次，自定义画板的设计与实现由理论到实践

今天工作闲来无视于是去了知网看看html5canvas相关的,看到下面的这个理论，于是我就动手来敲一遍，发现有些错误的地方，自己进行更改

  <canvas id="mycanvas"> </canvas>

<style>   
 #mycanvas{    
    /* width:600px;  css不要这样设置宽和搞会导致xy坐标不正确     
  height: 600px; */      
  background-color: black;    
}
</style>

<div style="width: 600px;height: 60rpx;">    <div onclick="changeTool(1)">画笔1</div>    <div onclick="changeTool(2)">画笔2</div>    <div onclick="changeTool(3)">橡皮擦</div></div>

// 为了判断鼠标是否处于按下状态,这里需要定义按下标记的变量,初始的按下状态为false,鼠标的初始坐标分别为0。
var onoff = false;        
var old_x = 0;       
var old_y = 0; 
// 线条的颜色      
var lineColor = "#fff"; 
// 画笔的默认宽度     
var lineW = 2;     
// 当前选中的工具  
var current_tool = 1;      
// 通过JavaSript获得canvas标签的控制权,并创建一个绘制二维图形的drm对象。  
var myCanvas = document.getElementById("mycanvas");       
var drm = myCanvas.getContext("2d"); 
// 设置画布的大小      
myCanvas.width = 600;       
myCanvas.height = 600;  
/** 接下来,将创建鼠标的监听事件,来判断当前鼠标的状态。
在绘画过程中,鼠标的状态变化过程是这样的:按下—移动-移动到画板外—松开,
所以需要对画板建立4个鼠标状态的监听事件,分别是mousedown、mousemove、mouseout、mouseup

myCanvas.addEventListener("mousedown",mousedown,false);        
myCanvas.addEventListener("mousemove",doDraw,true);        
myCanvas.addEventListener("mouseup",mouseup,false);        
myCanvas.addEventListener("mouseout",mouseout,false);  
  // 鼠标移出当前画布重置坐标位置与关闭工具的操作   
 function mouseout(event){             
    onoff = false;            
    old_x = 0;            
    old_y = 0;         
  }     
  // 鼠标按下记下其实的坐标并打开工具功能
 function mousedown(event){            
    onoff = true;           
    old_x = event.offsetX;           
    old_y = event.offsetY;               
 }   

  // 鼠标弹起重置坐标位置与关闭工具的操作   
 function mouseup(event){           
    onoff = false;           
    old_x = 0;         
    old_y = 0;     
   }  

//改变当前使用的工具
 function changeTool(tool) {     switch (tool) {         case 1:             current_tool = 1;             lineColor = "#fff";             lineW = 2;             break;         case 2:             current_tool = 2;             lineColor = "red";             lineW = 3;             break;         case 3:             current_tool = 3;             break;     } }

// 鼠标移动的事件function doDraw(event) {    // 记录当前移动的位置    var new_x = event.offsetX;    var new_y = event.offsetY;    // 打开工具的操作功能    if (onoff == true) {        // current_tool 1:白画笔 2：红色画笔 3:橡皮擦        if (current_tool === 1 || current_tool === 2) {            drm.beginPath(); //起始一条路径，或重置当前路径            drm.moveTo(old_x, old_y); //把路径移动到画布中的指定点，不创建线条            drm.lineTo(new_x, new_y); //添加一个新点，然后在画布中创建从该点到最后指定点的线条            drm.strokeStyle = lineColor; //设置或返回用于笔触的颜色、渐变或模式            drm.lineWidth = lineW; //设置或返回当前的线条宽度            drm.lineCap = "round"; //设置或返回线条的结束端点样式            drm.stroke(); //绘制已定义的路径               } else if (current_tool === 3) {            // 定义：clearRect() 方法清空给定矩形内的指定像素，用法： context.clearRect(x,y,width,height);            drm.clearRect(old_x, new_y, 10, 10);        } else {}        old_x = new_x;        old_y = new_y;    }}