4.10.1_用离屏来实现放大镜
来源:互联网 发布:网络实用技术基础作业1 编辑:程序博客网 时间:2024/05/29 19:45
4.10.1_用离屏来实现放大镜
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>用离屏来实现放大镜</title> <style> body{ background: #eee; } #canvas{ background: #fff; cursor: pointer; margin-left: 20px; margin-top: 20px; box-shadow: 4px 4px 8px rgba(0,0,0,0.5); -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5); -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5); } </style> </head> <body> <canvas id="canvas" width="800" height="520"></canvas> </body> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //离屏canvas var offscreenCanvas = document.createElement('canvas'); var offscreenContext = offscreenCanvas.getContext('2d'); var magnifyRectangle = {}; var scaledMagnifyRectangle = {}; var image = new Image(); var dragging = false; var imageData =null; var manifyingGlassX; //放大镜片的中心x var manifyingGlassY; //放大镜片的中心y var manifyingRuduis = 100; var manifyingScale = 1.2; //初始化 offscreenCanvas.width = canvas.width; offscreenCanvas.height = canvas.height; image.src = 'img/waterfall.jpg'; image.onload = function(){ context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height); } //事件 canvas.onmousedown = function(e){ var loc = windowToCanvas(e.clientX,e.clientY); e.preventDefault(); magnifyRectangle.x = loc.x; magnifyRectangle.y = loc.y; dragging = true; } canvas.onmousemove = function(e){ var loc; if(dragging){ loc = windowToCanvas(e.clientX,e.clientY); //擦除上次放大镜 eraseMagnifyingGlass(); //绘制新的放大镜 drawMagnifyingGlass(loc); } } canvas.onmouseup = function(){ eraseMagnifyingGlass(); dragging = false; imageData =null; } //擦除上次放大镜 function eraseMagnifyingGlass(){ if(imageData != null ){ context.putImageData(imageData,magnifyRectangle.x,magnifyRectangle.y); } } //绘制新的放大镜 function drawMagnifyingGlass(mouse){ manifyingGlassX = mouse.x; manifyingGlassY = mouse.y; calculateMagnifyRectangle(mouse); //得到放大区域在放大之前的数据 imageData = context.getImageData(magnifyRectangle.x, magnifyRectangle.y, magnifyRectangle.width, magnifyRectangle.height); context.save(); scaledMagnifyRectangle.width = magnifyRectangle.width*manifyingScale; scaledMagnifyRectangle.height = magnifyRectangle.height*manifyingScale; scaledMagnifyRectangle.x = manifyingGlassX-scaledMagnifyRectangle.width/2; scaledMagnifyRectangle.y = manifyingGlassY-scaledMagnifyRectangle.height/2; setClip(); offscreenContext.drawImage(canvas, magnifyRectangle.x, magnifyRectangle.y, magnifyRectangle.width, magnifyRectangle.height, 0, 0, scaledMagnifyRectangle.width, scaledMagnifyRectangle.height); context.drawImage(offscreenCanvas, 0, 0, scaledMagnifyRectangle.width, scaledMagnifyRectangle.height, scaledMagnifyRectangle.x, scaledMagnifyRectangle.y, scaledMagnifyRectangle.width, scaledMagnifyRectangle.height); context.restore(); } //设置放大镜剪辑区域 function setClip(){ context.beginPath(); context.arc(manifyingGlassX,manifyingGlassY,manifyingRuduis,0,Math.PI*2,false); context.clip(); } //计算放大镜所在矩形 function calculateMagnifyRectangle(mouse){ magnifyRectangle.x = mouse.x - manifyingRuduis; magnifyRectangle.y = mouse.y - manifyingRuduis; magnifyRectangle.width = 2*manifyingRuduis; magnifyRectangle.height = 2*manifyingRuduis; } //转换坐标 function windowToCanvas(x,y){ var bbox = canvas.getBoundingClientRect(); return{ x: x - bbox.left*(canvas.width/bbox.width), y: y - bbox.top *(canvas.height/bbox.height) } } </script></html>
0 0
- 4.10.1_用离屏来实现放大镜
- 4.10_放大镜
- 实现图片局部放大_放大镜效果
- 放大镜1
- Android放大镜的实现
- Android放大镜的实现
- Android放大镜的实现
- jquery实现放大镜
- 实现放大镜的效果
- jquery实现的放大镜
- Android放大镜的实现
- Android放大镜的实现
- jquery实现放大镜功能
- android放大镜效果实现
- Android 放大镜的实现
- JS实现放大镜效果
- 实现放大镜效果
- jQuery实现放大镜效果
- 4.10_放大镜
- UE4C++实现保存文件扩展
- SPFA
- Linux系统使用--定时关机的实现以及crontab命令和文件详解
- android -- 启程
- 4.10.1_用离屏来实现放大镜
- Linux下批量Kill多个进程
- Maven学习 (三) 使用m2eclipse创建web项目
- 矩阵开源库Eigen的使用
- 自然语言处理-Stanford中文实体识别
- Maven学习 (四) 使用Nexus搭建Maven私服
- 4.11.2_在Canvas中播放视频
- java web项目定时任务
- Maven学习 (五) Elipse中发布一个Maven项目到Tomcat