使用HTML5的Canvas标签实现绘图板内拖拽元素

第一次在csdn发表文章，纯属试水之作。希望各位多多指教。

直奔主题吧。本人使用了一下HTML5的Canvas标签之后，挺好用的各种画线条，图案等。能实现对Canvas标签内的像素进行随意编辑。加上各种鼠标事件就能实际绘图板，拖拽等功能了。

为了完成目标需要的准备如下：

1.使用Canvas绘制初始图像。

2.使用javascript的全局变量+（鼠标的移动、按住和放开的这3个事件）实现拖拽事件

3.要能得知 鼠标的指针的坐标（最重要）

event.offsetX//可以获取鼠标指针相对与元素的X坐标
event.offsetY//可以获取鼠标指针相对与元素的Y坐标

4.定义判断 特定图形编辑的规则

5.重新绘制图像。

最终成品如下：

  
    
    
    
    
    
    

	

  
  
  
    This is my JSP page2. 

    TestInit