HTML5实现图片拖动，旋转，放大，拉伸等特效资源-CSDN下载

共13个文件

jpg：6个

js：4个

url：1个

图片旋转放大

4星 · 超过85%的资源需积分: 50 126 浏览量 2017-11-23 15:01:16 上传评论收藏 179KB RAR 举报

HTML5是一种强大的网页开发技术，尤其在处理动态内容和交互性方面表现卓越。在这个场景中，我们关注的是如何使用HTML5来实现图片的各种特效，包括拖动、旋转、放大和拉伸。这些功能通常通过HTML5的Canvas元素来实现，Canvas提供了一个图形绘制的画布，我们可以在此基础上进行丰富的图形操作。 1. **HTML5 Canvas**: Canvas是HTML5的一个核心特性，它允许开发者在网页上进行动态的2D和3D图形渲染。通过JavaScript API，开发者可以绘制线条、形状、图像等，并进行复杂的动画操作。 2. **图片拖动（Drag and Drop）**: HTML5提供了拖放API（Drag and Drop API），使得用户可以直接通过鼠标或触摸屏将元素拖动到指定位置。在Canvas中，我们需要监听`dragstart`、`dragover`和`drop`等事件，捕获拖动的图像数据，并在Canvas上重新定位。 3. **图片旋转（Rotation）**: 要在Canvas上旋转图片，我们需要使用`rotate()`方法，该方法接受一个角度参数，表示旋转的度数。我们需要保存当前的绘图上下文，应用旋转，然后绘制图像，最后恢复原始绘图上下文。 4. **图片放大与缩小（Zooming）**: 可以通过改变Canvas的`drawImage()`方法中的源图像宽高比例来实现缩放。例如，如果比例大于1，则图像放大；如果比例小于1，则图像缩小。同时，为了保持图像的中心点不变，还需要调整图像的绘制位置。 5. **图片拉伸（Stretching）**: 与放大类似，可以通过调整`drawImage()`方法的源图像尺寸来拉伸图像。但是，过度拉伸可能导致图像失真，因此在实际应用中，需要谨慎处理。 6. **示例代码（canvas-demo）**: `html5 canvas-demo`很可能是包含实现这些特性的代码示例。这个示例可能包括HTML结构、CSS样式和JavaScript逻辑，展示了如何在Canvas上实现拖动、旋转、放大和拉伸的完整过程。 7. **交互优化**: 为了提高用户体验，我们还需要考虑一些额外的交互优化，比如添加平滑过渡效果、限制旋转角度只在特定范围、在放大时保持图像清晰度等。 8. **浏览器兼容性**: 尽管HTML5的功能在现代浏览器中得到了广泛支持，但老版本的浏览器可能不支持所有特性。开发者需要考虑到这些差异，可能需要引入polyfills或备选方案来确保跨浏览器兼容性。 9. **性能优化**: 对于大型图片或大量图片的操作，可能会导致性能问题。使用Web Workers进行离线处理，或者通过分块渲染等方式可以提高性能。 10. **安全性**: 当涉及到用户上传的图片时，需要注意安全问题，如防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等，确保用户数据的安全。 HTML5的Canvas元素为网页开发者提供了强大的图形处理能力，使得实现如图片拖动、旋转、放大和拉伸等特效变得简单且高效。通过不断实践和优化，我们可以创造出更具交互性和吸引力的网页应用。

资源推荐

资源详情

资源评论

收起资源包目录

html5 canvas-demo.rar （13个子文件）

html5 canvas-demo

xw素材.htm 64B

更多素材.url 186B

index.html 5KB

canvas_files

5.jpg 20KB

utilitie.js 96KB

canvasIm.js 10KB

8.jpg 17KB

4.jpg 15KB

excanvas.js 25KB

9.jpg 11KB

canvasEl.js 24KB

bg.jpg 64KB

7.jpg 10KB

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8;charset=utf-8"> <title>HTML5实现图片拖动，旋转，放大，拉伸等特效-xw素材网</title>  <style type="text/css" media="screen"> body { font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; } canvas { background-color: transparent; border: 1px solid gray; top: 0; left: 0; position: absolute;} canvas.resize-ne { cursor: ne-resize; } canvas.resize-se { cursor: se-resize; } canvas.resize-sw { cursor: sw-resize; } canvas.resize-nw { cursor: nw-resize; } canvas.move { cursor: move; } canvas.default { cursor: default; } img { display: block; visibility: hidden; position: absolute; top: -1000; left: -1000; } input { margin-left: 20px; } fieldset { width: 280px; float: left; } .fieldset { width: 200px; float: left; } #ft { background-color: #eee; height: 70px; width: 99%; border-top: 1px solid #ccc; padding: 5px; position: absolute; top: 0; left: 0; } #ft span { width: 100%; } </style> <script src="canvas_files/utilitie.js" type="text/javascript" charset="utf-8"></script> <script src="canvas_files/canvasEl.js" type="text/javascript" charset="utf-8"></script> <script src="canvas_files/canvasIm.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> var CanvasDemo = function() { var YD = YAHOO.util.Dom; var YE = YAHOO.util.Event; var canvas1; var img = []; return { init: function() { canvas1 = new Canvas.Element(); canvas1.init('canvid1', { width: YD.getViewportWidth() - 5, height: YD.getViewportHeight() - 5 }); img[img.length] = new Canvas.Img('img1', {}); img[img.length] = new Canvas.Img('img2', {}); img[img.length] = new Canvas.Img('img3', {}); img[img.length] = new Canvas.Img('bg', {}); img[img.length] = new Canvas.Img('img4', {}); img[img.length] = new Canvas.Img('img4', {}); // @param array of images ToDo: individual images canvas1.addImage(img[0]); canvas1.addImage(img[1]); canvas1.addImage(img[2]); canvas1.setCanvasBackground(img[3]); canvas1.addImage(img[4]); this.initEvents(); }, initEvents: function() { YE.on('togglebg','click', this.toggleBg, this, true); YE.on('showcorners','click', this.showCorners, this, true); YE.on('togglenone','click', this.toggleNone, this, true); YE.on('toggleborders','click', this.toggleBorders, this, true); YE.on('togglepolaroid','click', this.togglePolaroid, this, true); YE.on('pngbutton','click', function() { this.convertTo('png') }, this, true); YE.on('jpegbutton','click', function() { this.convertTo('jpeg') }, this, true); }, switchBg: function() { canvas1.fillBackground = (canvas1.fillBackground) ? false : true; canvas1.renderAll(); }, //! insert these functions to the library. No access to _aImages should be done from here showCorners: function() { this.cornersvisible = (this.cornersvisible) ? false : true; for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) { canvas1._aImages[i].setCornersVisibility(this.cornersvisible); } canvas1.renderAll(); }, toggleNone: function() { for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) { canvas1._aImages[i].setBorderVisibility(false); } canvas1.renderAll(); }, toggleBorders: function() { for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) { canvas1._aImages[i].setBorderVisibility(true); } canvas1.renderAll(); }, togglePolaroid: function() { for (var i = 0, l = canvas1._aImages.length; i < l; i += 1) { canvas1._aImages[i].setPolaroidVisibility(true); } canvas1.renderAll(); }, convertTo: function(format) { var imgData = canvas1.canvasTo(format); window.open(imgData, "_blank"); }, whatever: function(e, o) { // console.log(e); // console.log(o); } } }(); YAHOO.util.Event.on(window, 'load', CanvasDemo.init, CanvasDemo, true); </script> </head> <body id="canvasdemo" onLoad=""> <canvas id="canvid1"></canvas> <img id="img4" src="canvas_files/4.jpg" /> <img id="img1" src="canvas_files/7.jpg" /> <img id="img2" src="canvas_files/8.jpg" /> <img id="img3" src="canvas_files/9.jpg" /> <img id="img4" src="canvas_files/5.jpg" /> <img id="bg" src="canvas_files/bg.jpg" /> <div id="ft"> 此插件由xw素材网整理 : <a href="http://www.xwcms.net/" title="此插件由xw素材网整理">www.xwcms.net </a> <br> <div class="fieldset"> <input type="button" id="jpegbutton" value="Export to JPEG" /> <input type="button" id="pngbutton" value="Export to PNG (heavy)" /> </div> <fieldset> <legend>Photo</legend> <span><input type="radio" name="some_name" value="" id="togglenone" /> None</span> <span><input type="radio" name="some_name" value="" id="toggleborders" /> Border</span> <span><input type="radio" name="some_name" value="" id="togglepolaroid" /> Polaroid</span> </fieldset> <span><input type="checkbox" name="some_name" value="" id="showcorners" /> 显示角落<span> </div><br> </body> </html>

评论收藏

内容反馈