<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<canvas id="myCanvas" width="1000" height="800" style="margin-left:100px;">
您的浏览器不支持画布功能!
</canvas>
<script >
var beginX=10;
var beginY=10;
var w = 60;
var h = 30;
var zindexX,zindexY;
var arr = [['编号', '姓名', '性别'],['1', '张三', '男'],['2', '李四', '男']]
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.font="16px Georgia";
// cxt.scale(0.5,0.5);
var lineX,lineY
//表格
function createBlock(x,y){
cxt.beginPath();
for(l=1;l<=arr.length;l++){
var child = arr[l-1]
for(r=1;r<=child.length;r++){
a=x+(r-1)*w;
b=y+(l-1)*h;
x_zuobiao=a+10;
y_zuobiao=b+10;
lineX = a+w
lineY = b-h/2
cxt.rect(a,b,w,h);
cxt.fillText(child[r-1],x_zuobiao,b+(h/2)+5);
cxt.strokeStyle = '#000000';
cxt.stroke();
};
cxt.strokeStyle = '#000000';
cxt.stroke();
};
for(l=1;l<=arr.length;l++){
var child = arr[l-1]
for(r=1;r<=child.length;r++){
a=x+(r-1)*w+300;
b=y+(l-1)*h;
x_zuobiao=a+10;
y_zuobiao=b+10;
cxt.rect(a,b,w,h);
cxt.fillText(child[r-1],x_zuobiao,b+(h/2)+5);
cxt.strokeStyle = '#000000';
cxt.stroke();
};
cxt.strokeStyle = '#000000';
cxt.stroke();
};
cxt.stroke();
cxt.strokeStyle = 'green';
cxt.moveTo(lineX,lineY);
cxt.lineTo(lineX+20,lineY);
cxt.lineTo(lineX+300-3*w-20,lineY+30);
cxt.lineTo(lineX+300-3*w,lineY+30);
cxt.stroke();
};
//鼠标按下,将鼠标按下坐标保存在x,y中
createBlock(50,50);
c.onmousedown = function(ev){
var e = ev||event;
var x = e.layerX;
var y = e.layerY;
drag(x,y,cxt,c);
};
//拖拽函数
function drag(x,y,cxt,c){
if(cxt.isPointInPath(x,y)){
//路径正确,鼠标移动事件
c.onmousemove = function(ev){
var e = ev||event;
var ax = e.layerX;
var ay = e.layerY;
//鼠标移动每一帧都清楚画布内容,然后重新画圆
cxt.clearRect(0,0,c.width,c.height);
// cxt.translate(25,25);
cxt.restore()
createBlock(ax,ay);
};
//鼠标移开事件
c.onmouseup = function(){
c.onmousemove = null;
c.onmouseup = null;
};
};
};
function onMouseWheel(ev) { /*当鼠标滚轮事件发生时,执行一些操作*/
var ev = ev || window.event;
var down = true; // 定义一个标志,当滚轮向下滚时,执行一些操作
per = 1;
down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
if (down) {
per += 0.05;
} else {
per -= 0.05;
}
zindexX = (ev.layerX)*(1-1/parseFloat(per));
zindexY = (ev.layerY)*(1-1/parseFloat(per));
cxt.scale(parseFloat(per),parseFloat(per));
cxt.clearRect(zindexX,zindexY,c.width,c.height);
createBlock(ev.clientX/2,ev.clientY/2);
if (ev.preventDefault) { /*FF 和 Chrome*/
ev.preventDefault(); // 阻止默认事件
}
return false;
}
addEvent(c, 'mousewheel', onMouseWheel);
addEvent(c, 'DOMMouseScroll', onMouseWheel);
function addEvent(obj, xEvent, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + xEvent, fn);
} else {
obj.addEventListener(xEvent, fn, false);
}
}
</script>
</body>
</html>
HTML5 -canvas拖拽、移动 绘制图片可操作移动,拖动
最新推荐文章于 2024-04-20 09:59:24 发布