关于HTML5 canvas 的移动多边形问题

[hehaiquangvweb]

大家可以复制我下面这段代码去浏览器试试看......移动多边形的时候出现了奇怪的问题，帮帮忙看一下是哪出错啦？

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
startAngle = 0,
drawingSurfaceImageData;

var Polygon = function(centerX,centerY,radius,sides) {
this.x = centerX;
this.y = centerY;
this.radius = radius;
this.sides = sides;
}
var Point = function(x,y) {
this.x = x;
this.y = y;
}
Polygon.prototype = {
getPolygonPoints: function() {

var points = [],
angle = startAngle || 0;
for (var i =0; i < this.sides; i++) {
var point = new Point();
point.x = this.x + this.radius*Math.sin(angle);
point.y = this.y - this.radius*Math.cos(angle);
points.push(point);
//points.push(new Point(this.x + this.radius * Math.sin(angle),
// this.y - this.radius * Math.cos(angle)));
angle += 2*Math.PI/this.sides;
}
return points;
},

createPath: function(context) {
var points = this.getPolygonPoints();
context.moveTo(points[0].x,points[0].y);
for (var i = 1; i < points.length; i++) {
var point = points[i];
context.lineTo(point.x,point.y);
};
context.closePath();
},

isPointInPath: function(context,locX,locY) {
this.createPath(context);
return context.isPointInPath(locX,locY);
},
move: function(dx,dy) {
var points = this.getPolygonPoints();
points.forEach(function(point){
point.x += dx;
point.y += dy;
})
},
}





//event handler and rubberband update

var shapes = [];
function drawPolygons() {
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
drawOnePolygon(shape);
}
}
function windowsToCanvas(mousedownX,mousedownY) {
var bbox = canvas.getBoundingClientRect();
return {
x:mousedownX - bbox.x,
y:mousedownY - bbox.y
};
}
function updateRubberband(locX,locY) {
rubberbandRect.x = mousedown.x < locX ? mousedown.x : locX;
rubberbandRect.y = mousedown.y < locY ? mousedown.y : locY;
rubberbandRect.width = Math.abs(mousedown.x - locX);
rubberbandRect.height = Math.abs(mousedown.y - locY);
}
function drawRubberbandRect() {
var polygon = new Polygon(mousedown.x,
mousedown.y,
rubberbandRect.width,
6);
drawOnePolygon(polygon);
if (!dragging) {
shapes.push(polygon);
};

}

function drawOnePolygon(polygon) {
context.beginPath();
context.lineWidth = 10;
polygon.createPath(context);
context.stroke();
}

function saveCanvasData() {
drawingSurfaceImageData = context.getImageData(0, 0,
canvas.width,
canvas.height);
}
function restoreCanvasData () {
// body...
context.putImageData(drawingSurfaceImageData,0,0);
}
//用startDragging的目的是要使用saveCanvasData函数
function startDragging(locX,locY) {
saveCanvasData();
mousedown.x = locX;
mousedown.y = locY;
}

var dragging = false,
editing = false,
mousedown = {},
rubberbandRect = {},
draggingOffsetX,
draggingOffsetY;
canvas.onmousedown = function(e) {
e.preventDefault();
dragging = true;
var loc = windowsToCanvas(e.clientX,e.clientY);
for (var i = 0; i < shapes.length; i++) {
var shape = shapes[i];
if (shape.isPointInPath(context,loc.x,loc.y)){
dragging = shape;
startDragging(loc.x,loc.y);
draggingOffsetX = mousedown.x - shape.x;
draggingOffsetY = mousedown.y - shape.y;
editing = true;
return;
};
};




startDragging(loc.x,loc.y);
}
canvas.onmousemove = function(e) {
e.preventDefault();
var loc = windowsToCanvas(e.clientX,e.clientY);
if (dragging && editing) {

dragging.x = loc.x - draggingOffsetX;
dragging.y = loc.y - draggingOffsetY;
context.clearRect(0,0,canvas.width,canvas.height);
drawPolygons();

}else if (dragging) {
restoreCanvasData();
updateRubberband(loc.x,loc.y);
drawRubberbandRect();
};
}
canvas.onmouseup = function() {
dragging = undefined;
if (!editing) {
drawRubberbandRect();
};
editing = false;
}

[业余草]

http://www.cnblogs.com/picaso/archive/2012/11/26/2789670.html http://www.41443.com/HTML/HTML5/20141014/177859.html