本文介绍了如何使用HTML5的Canvas标签结合JavaScript实现绘图板内的元素拖拽功能。通过Canvas绘制初始图像，利用鼠标事件监听拖拽操作，获取鼠标坐标，定义图形编辑规则，并重新绘制图像，最终实现可拖拽的绘图效果。
第一次在csdn发表文章，纯属试水之作。希望各位多多指教。
直奔主题吧。本人使用了一下HTML5的Canvas标签之后，挺好用的各种画线条，图案等。能实现对Canvas标签内的像素进行随意编辑。加上各种鼠标事件就能实际绘图板，拖拽等功能了。
为了完成目标需要的准备如下：
1.使用Canvas绘制初始图像。
2.使用javascript的全局变量+（鼠标的移动、按住和放开的这3个事件）实现拖拽事件
3.要能得知 鼠标的指针的坐标（最重要）
event.offsetX//可以获取鼠标指针相对与元素的X坐标
event.offsetY//可以获取鼠标指针相对与元素的Y坐标
4.定义判断 特定图形编辑的规则
5.重新绘制图像。
最终成品如下：
<!DOCTYPE HTML>
<html>
<head>
<script type="text
最低0.47元/天 解锁文章
扫一扫
1090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
