热门关键字:
jquery > jquery教程 > jquery教程 > html5 canvas做批改作业的小插件代码示例

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

312
作者:管理员
发布时间:2021/4/20 17:54:17
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4505
  需求分析


  能进行批改,就是相当于画笔


  能进行画笔的撤回功能


  能进行全部画笔的清除功能


  可以转化画笔的颜色


  画笔的实现


  当按下鼠标(mousedown)记录开始点startX, startY


  当移动鼠标的时候(mousemove)就获取当前的鼠标的坐标e.cpentX,


  e.cpentY,获取到了当前的坐标后,与上一个点的坐标轴的左边进行连线(pneTo ),这样就能画出了一条横线了


  当鼠标松开左键(mouseup)时候,就清除mousemove的函数


  清除功能:讲原始的图片再次用drawImage()函数来重置


  撤回功能:在每次按下鼠标那时候,用getImageData()函数获取当前的图像记录到数组里面,然后按撤回则使用putImageData()函数放在canvas


  画笔的颜色:在mousemove里面改变strokeStyle笔的颜色


  代码实现


  移动鼠标画出线条的代码




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐