第一章 基础知识

window.onmouseup = function (e) {

   e.preventDefault();

   rubberbandEnd();

};

image.onload = function () {

   context.drawImage(image, 0, 0, canvas.width,canvas.height);

};

resetButton.onclick = function(e) {

   context.clearRect(0, 0, context.canvas.width,

                           context.canvas.height);

   context.drawImage(image, 0, 0, canvas.width,canvas.height);

};

//Initialization.....................................................

image.src = 'curved-road.png';

    在这段代码中，我们又一次超前地使用了drawImage()方法同时对图像进行了绘制与缩放。本书4.1节将会详细研究这个方法，同时我们还会学习另外一种实现该效果的办法，那就是通过直接修改图像的像素来绘制橡皮筋式选取框。

    然而，现在我们要关注的还是用于实现橡皮筋式选取框的DIV元素，以及这段代码是如何在用户拖动鼠标时修改该元素大小的。

    canvas的onmousedown事件处理器在被触发时会调用rubberbandStart()方法，该方法会将DIV元素的左上角移动到鼠标按下的地点，并使DIV元素可见。由于代表橡皮筋式选取框的这个DIV元素，其CSS中的position值是absolute，所以在指定其左上角坐标时，必须指定相对于窗口的坐标，而不是相对于canvas的坐标。

    如果用户拖动鼠标，那么onmousemove事件处理器就会调用rubberbandStretch()方法，该方法会对代表橡皮筋式选取框的这个DIV元素进行移动与缩放操作。

    当用户松开鼠标的时候，onmouseup事件处理器就会调用rubberbandEnd()方法，该方法会把选中的那部分图像放大，并绘制出来，同时将表示橡皮筋式选取框的那个DIV元素隐藏起来。

    最后，请注意，以上三个鼠标事件处理器都会在传入的事件对象上调用preventDefault()方法。就像在1.6.1小节中讨论的那样，调用该方法可以防止浏览器对鼠标事件做出响应。如果你将preventDefault()方法的调用移除，那么浏览器就会试着选中网页上的元素，要是用户在拖动时将鼠标移出了canvas的范围，那么就会产生不好的效果。