html5 canvas做批改作业的小插件代码示例

  需求分析
 
  能进行批改,就是相当于画笔
 
  能进行画笔的撤回功能
 
  能进行全部画笔的清除功能
 
  可以转化画笔的颜色
 
  画笔的实现
 
  当按下鼠标(mousedown)记录开始点startX, startY
 
  当移动鼠标的时候(mousemove)就获取当前的鼠标的坐标e.cpentX,
 
  e.cpentY,获取到了当前的坐标后,与上一个点的坐标轴的左边进行连线(pneTo ),这样就能画出了一条横线了
 
  当鼠标松开左键(mouseup)时候,就清除mousemove的函数
 
  清除功能:讲原始的图片再次用drawImage()函数来重置
 
  撤回功能:在每次按下鼠标那时候,用getImageData()函数获取当前的图像记录到数组里面,然后按撤回则使用putImageData()函数放在canvas
 
  画笔的颜色:在mousemove里面改变strokeStyle笔的颜色
 
  代码实现
 
  移动鼠标画出线条的代码

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61784.shtml

张贴在2