<!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>
