使用HTML5的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/javascript">var x=0;var y=0;var x2=0;var y2=0;var flag=false;function cnvs_getCoordinates(e){tempx=e.offsetX;tempy=e.offsetY;if(flag){if(tempx>(x-25)&&tempx<(x+25)&&tempy>(y-25)&&tempy<(y+25)){x=x2+tempx;y=y2+tempy;if(x>90&&x<100&&y>90&&y<100){document.getElementById("xycoordinates").innerHTML="特定区域,可用于触发其它事件";}else{document.getElementById("xycoordinates").innerHTML="Coordinates: (" + tempx + "," + tempy + ")";REMS(x,y);}}}}function InitCanvas(){x=Math.random()*450+25;y=Math.random()*450+25;REMS(x,y);}function REMS(a,b){var c=document.getElementById("ls");var cxt=c.getContext("2d");cxt.clearRect(0,0,500,500);cxt.fillStyle="#FF0000";cxt.fillRect(a-25,y-25,50,50);}function T1(e){flag=true;tempx=e.offsetX;tempy=e.offsetY;if(tempx>(x-25)&&tempx<(x+25)&&tempy>(y-25)&&tempy<(y+25)){x2=x-tempx;y2=y-tempy;}}function F1(){flag=false;}</script><title>My JSP 'MyJsp.jsp' starting page</title><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body>This is my JSP page2. <br><button οnclick="InitCanvas()">TestInit</button><div id="xycoordinates"></div><hr><canvas height="500" width="500" id="ls" οnmοusemοve="cnvs_getCoordinates(event)" οnmοusedοwn="T1(event)" οnmοuseup="F1()" οnmοuseοut="F1()"></canvas><hr></body>
</html>

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

前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS canvas标签制作色相球 var canvas,ctx, ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
canvas图形放大缩小鼠标拖拽
canvas图形放大缩小鼠标拖拽在网上找的都是放大缩小,或者鼠标拖拽,没有两者都满足的一开始我天真的以为两个合并就可以了,但其实当鼠标松开和点击的时候,坐标原点是会变的,就是每次拖拽都是清除之前, ...
HTML5之Canvas标签简要学习
HTML5 提供了画布(canvas)标签,通过与Javascript结合使用,可以在网页上绘制图像.Canvas是一个矩形区域,使用Javascript可以控制其每一个像素.本文将对canvas标签 ...
用HTML5新增canvas标签实现个性时钟效果
先看看效果图吧目录简介实现思路代码 html部分 css部分 js部分绘制函数部分: 完整代码如下简介十二小时制的时钟,最内层是秒针,中间为分针,外层为时针. 中心显示的是当前日期和时间 ...
结构标签、行内与块元素、列表、超链接、图片标签格式及音视频（vscode）
结构标签: <body>  <!-- html5 新增的标签,语义化更 ...
前端基础——双单标签、行内块级元素、路径、常用标签
一.单标签和双标签: 在HTML基础中,单标签就是由一个标签组成的. 例如<br>.<hr>.<img>.<input>.<param>.& ...
canvas 实现图片放大缩小拖拽移动端、PC端
前言实现目标:使用canvas画出地图,且可以通过鼠标滚轮缩放,拖拽:手指滑动拖拽,手势缩放 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dW ...

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

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

最新文章

热门文章