您的位置：首页 > Web前端 > HTML5

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

2017-10-25 21:53 579 查看

第一次在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>



</head>

<body>
This is my JSP page2. <br>
<button onclick="InitCanvas()">TestInit</button>
<div id="xycoordinates"></div>
<hr>
<canvas height="500" width="500" id="ls" onmousemove="cnvs_getCoordinates(event)" onmousedown="T1(event)" onmouseup="F1()" onmouseout="F1()"></canvas>

<hr>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 javascript canvas

相关文章推荐

新的分享

章节导航