canvas（11/30）--------事件处理（局部图片放大）

最新推荐文章于 2024-03-29 17:03:34 发布

蜜糖雪兒

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量805

点赞数

分类专栏：前端文章标签： canvas

本文链接：https://blog.csdn.net/ydmichelle/article/details/78681427

版权

本文主要探讨了如何在canvas中实现对局部图片的放大功能，通过JavaScript的事件处理来实现这一交互效果。

摘要由CSDN通过智能技术生成

example2.js

var canvas = document.getElementById('canvas');
	context = canvas.getContext('2d');
	rubberbandDiv = document.getElementById('rubberbandDiv');
	resetButton = document.getElementById('resetButton');
	image = new Image();
	mousedown = {};
	rubberbandRectangle = {};
	dragging = false;
//将div元素的左上角移动到鼠标按下的选点，并使div元素可见。
function rubberbandStart(x,y){
	mousedown.x = x;
	mousedown.y = y;

	rubberbandRectangle.left = mousedown.x;
	rubberbandRectangle.top = mousedown.y;

	moveRubberbandDiv();
	showRubberbandDiv();

	dragging = true;
}
//对代表橡皮筋式选矿的这个div元素进行移动与缩放操作
function rubberbandStretch(x,y) {
	rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x;
	rubberbandRectangle.top = y < mousedown.y