canvas.putImageData()出错

一尺丈量 2013-11-25 08:52:01

html代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RubberHands</title>
<style>
body{
background:#eeeeee;
}
#controls{
position:absolute;
left:25px;
top:25px;
}
#canvas{
background:#ffffff;
cursor:pointer;
margin-left:10px;
margin-top:10px;
-webkit-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow:4px 4px 8px rgba(0,0,0,0.5);
box-shadow:4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>

<body>
<canvas id="canvas" width="600" height="400">
Canvas not supported
</canvas>
<div id="controls">
Stroke color:<select id="strokeStyleSelect">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="purple">purple</option>
<option value="cornflowerblue">cornflowerblue</option>
<option value="black">black</option>
</select>

Guidewires:
<input id="guideWireCheckBox" type="checkbox" checked/>
<input id="eraseAllButton" type="button" value="Erase all"/>
</div>
<script type="text/javascript" src="drawGrid.js"></script>
<script type="text/javascript" src="HTML5CanvasRubberBand.js"></script>
</body>
</html>
JS代码如下：
// JavaScript Document
//This javascript file belongs to RubberHands.html
//The function of this file is to implement a Rubber bands animation
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
eraseAllButton = document.getElementById('eraseAllButton'),
strokeStyleSelect = document.getElementById('strokeStyleSelect'),
guideWireCheckBox = document.getElementById('guideWireCheckBox'),
drawingSurfaceImageData ,
mousedown = {},
rubberbandRect = {},
dragging = false,
guidewires = guideWireCheckBox.checked;
//call a function to draw grid,
drawGrid(context, 'lightgray', 10, 10);
//.......................................................
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
}
//save and restore drawing surface...............................
function saveDrawingSurface() {
drawingSurfaceImageData = context.getImageData(0, 0, canvas.width, canvas.height);
}
function restoreDrawingSurface() {
context.putImageData(drawingSurfaceImageData, 0, 0);
}

//Rubber bands..........................................
function updateRubberbandRectangle(loc) {
rubberbandRect.width = Math.abs(loc.x - mousedown.x);
rubberbandRect.height = Math.abs(loc.y - mousedown.y);
if (loc.x > mousedown.x) {
rubberbandRect.left = mousedown.x;
} else {
rubberbandRect.left = loc.x;
}
if (loc.y > mousedown.y) {
rubberbandRect.top = mousedown.y;
} else {
rubberbandRect.top = loc.y;
}
}

function drawRubberbandShape(loc) {
context.beginPath();
context.moveTo(mousedown.x, mousedown.y);
context.lineTo(loc.x, loc.y);
context.stroke();
}

function updateRubberband(loc) {
updateRubberbandRectangle(loc);
drawRubberbandShape(loc);
}
//Guidewires...............................................

function drawHorizontalLine(y) {
context.beginPath();
context.moveTo(0, y + 0.5);
context.lineTo(context.canvas.width, y + 0.5);
}

function drawVerticalLine(x) {
context.beginPath();
context.moveTo(x + 0.5, 0);
context.lineTo(x + 0.5, context.canvas.height);
context.stroke();
}

function drawGuideWires(x, y) {
context.save();
context.strokeStyle = 'rgba(0,0,230,0.4)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
context.restore();
}

//Canvas event handlers........................................
canvas.onmousedown = function (e) {
var loc = windowToCanvas(e.clientX, e.clientY);
e.preventDefault();
mousedown.x = loc.x;
mousedown.y = loc.y;
dragging = true;
};

canvas.onmousemove = function (e) {
var loc;

if (dragging) {
e.preventDefault();
loc = windowToCanvas(e.clientX, e.clientY);
restoreDrawingSurface();
updateRubberband(loc);
if (guidewires) {
drawGuideWires(loc.x, loc.y);
}
}
};
canvas.onmouseup = function (e) {
loc = windowToCanvas(e.clientX, e.clientY);
restoreDrawingSurface();
updateRubberband(loc);
dragging = false;
};

//Controls event handlers.......................................
eraseAllButton.onclick = function (e) {
context.clearRect(0, 0, canvas.width, canvas.height);
drawGrid(context, 'lightgray', 10, 10);
saveDrawingSurface();
};

strokeStyleSelect.onchange = function (e) {
context.strokeStyle = strokeStyleSelect.value;
};

guideWireCheckBox.onchange = function (e) {
guidewires = guideWireCheckBox.checked;
};
//Initialization..........................
context.strokeStyle = strokeStyleSelect.value;

用VS调试时总是说：

，也不知道怎么回事。如果将代码中与那两个函数有关的调用注释了的话，程序呆以正常运行。