canvas鼠标选取放大 欢迎大家有好点建议可以提。js高级扣扣群:170798851 欢迎来交流学习
git项目地址:https://github.com/Jonavin/HTML5_Study
/** * Created by wsf on 2014-11-23. */ ;//分号为了保证代码合并时不出错 (function(win){ "use strict"; var doc = win.document,cvs = doc.querySelector("#canvas"), selector = doc.getElementById("selector"), restBtn = doc.getElementById("resetBtn"), ctx = cvs.getContext("2d"), img = new Image(),width = cvs.width,height = cvs.height,msdown = {},selectRect = {},dragging = false; var _functions = { //选取开始 selectStart : function(x,y) { msdown.x = x;//鼠标按下横坐标 msdown.y = y; selectRect.left = msdown.x; selectRect.top = msdown.y;// this.moveSelector();//移动选取框 this.showSelector();//显示选取框 dragging = true;// }, //移动选取框 moveSelector: function () { selector.style.top = selectRect.top + "px"; selector.style.left = selectRect.left + "px"; }, //显示选取框 showSelector:function(){ selector.style.display = "inline"; }, //展开选取框 selectorStretch:function(x,y){ selectRect.left = Math.min(x,msdown.x); selectRect.top = Math.min(y,msdown.y); selectRect.width = Math.abs(x - msdown.x); selectRect.height = Math.abs(y-msdown.y); this.moveSelector();//移动选取框 this.resizeSelector();//重设选取框 }, //重设选取框大小 resizeSelector:function(){ selector.style.width = selectRect.width + "px"; selector.style.height = selectRect.height + "px"; }, //重置选取框 resetSelector:function(){ selectRect = {top:0,left:0,width:0,height:0}; }, //选取结束 selectEnd:function(){ var _box = cvs.getBoundingClientRect(); try{ ctx.drawImage(cvs,selectRect.left-_box.left,selectRect.top-_box.top,selectRect.width,selectRect.height,0,0,width,height); }catch (e){ } this.resetSelector(); selector.style.width = 0; selector.style.height = 0; this.hideSelector(); dragging = false; }, hideSelector:function(){ selector.style.display = "none"; } } cvs.onmousedown = function(e){ var x = e.clientX,y = e.clientY; e.preventDefault();//阻止浏览器默认事件 _functions.selectStart.call(_functions,x,y); } win.onmousemove = function(e){ var x = e.clientX,y = e.clientY; e.preventDefault(); if(dragging){ _functions.selectorStretch.call(_functions,x,y); } } win.onmouseup = function(e){ e.preventDefault(); _functions.selectEnd.call(_functions); } img.onload = function(){ ctx.drawImage(img,0,0,width,height); } restBtn.onclick = function(e){ ctx.clearRect(0,0,width,height); ctx.drawImage(img,0,0,width,height); } img.src = "img.jpg"; })(window);
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>鼠标选取canvas区域</title> <style> body{ background: rgba(100,145,250,0.3); } #canvas{ margin-left: 20px; margin-bottom: 10px; margin-right: 0; border:thin solid #aaa; padding: 0; } #controls{ margin:20px 0 20px 20px; } #selector{ position: absolute; border:3px solid blue; cursor: crosshair; display: none; } </style> </head> <body> <div id="controls"> <input type="button" id="resetBtn" value="重置"/> </div> <div id="selector"></div> <canvas id="canvas" width="800" height="520"> 不支持canvas </canvas> <script src="mouseSelect.js"></script> </body> </html>
相关推荐
Html5-canvas之图片添加马赛克 Html5-canvas之图片添加马赛克
html5-canvas-loader.rar
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
html2canvas-1.0.0-rc.4版本
html5-canvas-web-图片涂鸦
canvas.width = window.innerWidth; canvas.height = window.innerHeight; for (i = (body.length-1); i > 0; i--) { body[i].x = body[i-1].x; body[i].y = body[i-1].y; }
Android开发者学习笔记-View、Canvas、bitmap.pdf
十分好看的一款HTML5 Canvas鼠标移动圆点粒子跟随动画特效,鼠标移动圆点粒子出现并跟随鼠标指针移动,不动时圆点粒子则渐渐消失。
基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,支持自定义 基于HTML5 Canvas烟花绽放效果,...
文字粒子效果,通过canvas side的开发
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html5-canvas-border-pixel-progressbar源码
html5-canvas-15-clock.zip
HTML5 Canvas泡泡悬浮鼠标特效是一款鼠标滑过泡沫动画特效下载。
NULL 博文链接:https://128kj.iteye.com/blog/2083289
html5-canvas-rabbit-run-games-code 3d游戏 适应手机和PC
HTML5 Canvas鼠标星星粒子特效是一款跟随鼠标星星粒子动画特效。
HTML5 Canvas生成粒子效果的人物头像html5-canvas-pixel-image-master.zip
html5 canvas鼠标悬停英文字母颗粒状放大查看效果