橡皮筋式选取图片放大-Canvas学习第四天

效果是，放入一张图片，然后截取某个区域就会将该区域放大。
HTML代码

Canvas not supported

JavaScript代码

var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),rubberbandDiv =document.getElementById('rubberbandDiv'),resetButton =document.getElementById('resetButton'),image = new Image(),mousedown = {},rubberbandRectangle = {},dragging = false;//Function............................................................function rubberbandStart(x ,y){mousedown.x = x;mousedown.y = y;rubberbandRectangle.left = mousedown.x;rubberbandRectangle.top = mousedown.y;moveRubberbandDiv();showRubberbandDiv();dragging = true;
}function rubberbandStretch(x, y){rubberbandRectangle.left = x < mousedown.x ? x: mousedown.x;rubberbandRectangle.top = y < mousedown.y ? y: mousedown.y;rubberbandRectangle.width =Math.abs(x -mousedown.x);rubberbandRectangle.height = Math.abs(y -mousedown.y);moveRubberbandDiv();resizeRubberbandDiv();
}function rubberbandEnd(){var bbox = canvas.getBoundingClientRect();try {context.drawImage(canvas,rubberbandRectangle.left -bbox.left,rubberbandRectangle.top -bbox.top,rubberbandRectangle.width,rubberbandRectangle.height,0, 0, canvas.width, canvas.height);}catch(e) {// Suppress error message when mouse is released// outside the canvas}resetRubberbandRectangle();rubberbandDiv.style.width = 0;rubberbandDiv.style.height = 0;hideRubberbandDiv();dragging = false;
}function moveRubberbandDiv() {rubberbandDiv.style.top =rubberbandRectangle.top + 'px';rubberbandDiv.style.left =rubberbandRectangle.left +'px';
}function resizeRubberbandDiv() {rubberbandDiv.style.width =rubberbandRectangle.width + 'px';rubberbandDiv.style.height =rubberbandRectangle.height+ 'px';
}function showRubberbandDiv() {rubberbandDiv.style.display = 'inline';
}function hideRubberbandDiv() {rubberbandDiv.style.display = 'none';
}function resetRubberbandRectangle() {rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0};
}//Event handlers...........................................................................
//鼠标按下时调用Start方法
canvas. onmousedown = function(e) {var x = e.clientX,y = e.clientY;e.preventDefault();rubberbandStart(x, y);
};
//拖动时调用Stretch方法
window.onmousemove = function(e) {var x = e.clientX,y = e.clientY;e.preventDefault();if(dragging) {rubberbandStretch(x, y);}
};
//松开鼠标时调用End方法
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 = 'sprite.jpg';

以上三个鼠标事件处理器都会在传入的事件对象上调用preventDefault()方法。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！