js实现图片旋转 js滚动鼠标中间对图片放大缩小

从开通博客园到今天，有两个多月了。我发现之前没有开通博客记录自己所做的东西，真是后悔啊。 现在一点一点把自己所做的功能以博客的形式记录下来，一方面可以给大家分享，大家一起学习，同时自己也从新回顾一下。 这个图片放大，缩小和旋转，我采用canvas画布这个来做的，核心点就在js中去控制鼠标状态及事件。 我先给大家展示一下效果图。 鼠标移到画布范围内就会出现下方的操作栏，每次以90度选择。 1.在引入js的时候一定要注意了，由于在使用画布canvas时，需要等图片加载完成后才可以执行画布里的内容。js要在最后引入。 2.js中要在图片加载完成之后在方法 主要的地方就是这个啦，其它就是js方法 在本文中，我们将探讨如何使用JavaScript（JS）和HTML5的Canvas API来实现图片的旋转和缩放功能。我们需要了解Canvas元素是HTML5提供的一种用于在网页上绘制图形的二维绘图环境。通过JavaScript，我们可以操控Canvas的Context对象（在本例中是`cxt`）进行各种绘图操作。 1. **图片加载**： 在使用Canvas处理图片前，必须确保图片已经完全加载。在JS中，我们通常通过监听`window.onload`事件来确保在所有资源加载完成后执行代码。在这个例子中，我们创建了一个新的`Image`对象，并将其`src`属性设置为图片URL，然后定义了一个`loadImage`函数，该函数会在图片加载完成后被调用。JS代码应放在HTML的底部，确保在图片加载前执行。 2. **图片旋转**： 图片的旋转可以通过改变Context的transform矩阵来实现。在JavaScript中，我们可以使用`rotate()`方法来设置旋转角度。例如，`cxt.rotate(currentRate * Math.PI / 180)`会将当前的旋转角度转换为弧度并应用到图像上。每次旋转90度，可以将`currentRate`变量增加或减少90，然后调用`rotate()`。 3. **图片缩放**： 缩放可以通过调整Context的`scale()`方法来完成。例如，`cxt.scale(imgScale, imgScale)`会根据`imgScale`的值缩放图像。在鼠标滚轮事件中，我们可以监听`mousewheel`或`DOMMouseScroll`事件，根据滚动方向改变`imgScale`的值，从而实现图片的放大或缩小。 4. **鼠标交互**： 鼠标事件处理是实现图片操作的关键。这里，我们可能需要`mousedown`、`mousemove`和`mouseup`事件来追踪鼠标的按下、移动和释放状态。当鼠标按下时，记录下当前位置（`mouseDownLocation`），在鼠标移动时更新图片的位置，而在鼠标释放时停止更新。`isMouseDown`变量用于判断当前是否为鼠标按下状态。 5. **HTML结构**： HTML中，`<canvas>`元素用于绘制图像，`<img>`元素用于存储原始图像，而`<div id="control">`包含旋转按钮，用于触发旋转事件。CSS样式用于布局和美化这些元素，如设置边框、透明度和位置。 6. **核心JS代码**： 关键的JavaScript代码包括获取Canvas、父级div和控制栏元素，设置初始变量，以及定义处理图片加载、绘制、旋转和缩放的函数。例如，`drawImage()`函数用于将图片绘制到Canvas上，`rateImage(angle)`用于执行旋转操作。 7. **代码示例**： 提供的代码片段中，HTML和CSS部分展示了如何构建基本的页面结构和样式，而JS部分则包含了初始化、事件监听和图像操作的核心逻辑。 通过以上步骤，我们可以实现一个简单的图片旋转和缩放的功能。对于更复杂的应用，可能还需要考虑平滑滚动、边界检测、旋转中心点设置等问题。学习和理解这些概念有助于提升JavaScript和Canvas的使用技能，以便在实际项目中创建更丰富的交互体验。