<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>移动canvas</title> <style type="text/css"> body{margin:20px auto; padding:0; width:1000px } canvas{border:dashed 2px #ccc} span{font-size:16px; cursor:pointer} </style> <script type="text/javascript"> // canvas 矩形框集合,用于记录每画出一个矩形框点位坐标 var rects=[]; // canvas起始(0,0)坐标在左上角 // 矩形框参数 x指x轴坐标,y指y轴坐标,width指方形的宽,height指方形的高 function rectar(x,y,width,height){ this.x = x; this.y = y; this.width = width; this.height = height; this.isSelected = false; }; // 画形 操作是先清除整个画布再根据点位参数画出需要的形状 function drawRect() { // 清除画布,准备绘制 context.clearRect(0, 0, canvas.width, canvas.height); // 遍历所有矩形框 for(var i=0; i<rects.length; i++) { var rect = rects[i]; // 绘制矩形 context.strokeStyle="#FF0000"; // 如果被选中加粗线条 if (rect.isSelected) { context.lineWidth = 30; }else { context.lineWidth = 10; } // 画出方形 context.strokeRect(rect.x,rect.y,rect.width,rect.height,rect.color); } } //创建一个方形(页面中button的点击事件) function addRandomRect() { var x=50; var y=50; var width=400; var height=200; // 创建一个新的矩形对象 var rect=new rectar(x,y,width,height); // 把它保存在数组中 rects.push(rect); // 重新绘制画布 drawRect(); } // 初始化一些参数 var SelectedRect; var x1; var y1; var right=false; var widthstart,widthend; var heightstart,heightend; // 点击canvas触发事件 function canvasClick(e) { // 取得画布上被单击的点 var clickX = e.pageX - canvas.offsetLeft; var clickY = e.pageY - canvas.offsetTop; // 查找被单击的矩形框 for(var i=rects.length-1; i>=0; i--) { // 获取数组中方形对象 var rect = rects[i]; widthstart=rect.x; widthend=rect.x+rect.width; heightstart=rect.y; heightend=rect.y+rect.height; // 判断这个点是否在矩形框中 if ((clickX>=widthstart&&clickX<(widthend-20))&&(clickY>=heightstart)&&(clickY<(heightend-20))) { console.log(clickX); console.log(clickY); // 清除之前选择的矩形框 if (SelectedRect != null){ SelectedRect.isSelected = false; } SelectedRect = rect; x1=clickX-SelectedRect.x; y1=clickY-SelectedRect.y; // 选择新圆圈 rect.isSelected = true; // 使圆圈允许拖拽 isDragging = true; // 更新显示 drawRect(); // 停止搜索 return; }else{ right = true; drawRect(); } // 设置拉伸的界限 if (clickX>=(widthend-20)&&((clickX<=(widthend+20)))&&(clickY>=(heightend-20))&&(clickY>=(heightend+20))){ SelectedRect = rect; right=true; } } } // canvas响应事件 function dragRect(e) { // 判断矩形是否开始拖拽 if (isDragging == true) { // 判断拖拽对象是否存在 if (SelectedRect != null) { // 取得鼠标位置 var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; // 将圆圈移动到鼠标位置 SelectedRect.x= x-x1; SelectedRect.y= y-y1; // 更新画布 drawRect(); } } //判断是否开始拉伸 if (right) { //设置拉伸最小的边界 if ((e.pageX - canvas.offsetLeft-SelectedRect.x)>50) { SelectedRect.width=e.pageX - canvas.offsetLeft-SelectedRect.x; }else { SelectedRect.width=50; } console.log(SelectedRect.width); if((e.pageY - canvas.offsetTop-SelectedRect.y)>50){ SelectedRect.height=e.pageY - canvas.offsetTop-SelectedRect.y; }else { SelectedRect.height=50; } drawRect(); } } var isDragging = false; var right = false; // 停止画 function stopDragging() { isDragging = false; right=false; }; // 页面加载 window.onload = function() { canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); //鼠标按下事件 canvas.onmousedown = canvasClick; //鼠标弹起事件 canvas.onmouseup = stopDragging; //鼠标移出canvas事件 canvas.onmouseout = stopDragging; //鼠标移到指定元素事件 canvas.onmousemove =dragRect; } </script> </head> <body> <canvas id="canvas" width="1000px" height="600px"></canvas> <span onclick="addRandomRect();"><mark>画方形</mark></span> </body> </html>