轉：canvas--放大鏡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滑鼠事件</title>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="offCanvas" style=" display: none;"></canvas>
<script>
var canvas=document.getElementById('canvas')
var context=canvas.getContext('2d')
var offcanvas=document.getElementById('offCanvas')
var offcontext=offcanvas.getContext('2d')
var image=new Image()
//滑鼠左鍵是否被點選
var isMouseDown=false;
//定義縮放值
var scale
window.onload=function(){
canvas.width="1030";
canvas.height='750';
image.src="timg.jpg"
//圖片的原始尺寸要大於canvas的尺寸
image.onload=function(){
offcanvas.width=image.width;
offcanvas.height=image.height
scale=offcanvas.width/canvas.width;
context.drawImage(image,0,0,canvas.width,canvas.height);
offcontext.drawImage(image,0,0)
}
//將螢幕的座標轉換為在canvas的座標
function windowToCanvas(x,y){
//獲取canvas距離瀏覽器周圍的left和top值
var bbox=canvas.getBoundingClientRect();
return {x:x-bbox.left,y:y-bbox.top}
}
//滑鼠按下
canvas.onmousedown=function(e){
e.preventDefault(e);
var point=windowToCanvas(e.clientX,e.clientY);
//console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
isMouseDown=true
//繪製放大鏡 當onmouseup、onmouseout時 drawcanvasWithMagnifier傳入false
drawcanvasWithMagnifier(true,point)
}
//滑鼠移動
canvas.onmousemove=function(e){
e.preventDefault(e);
//需要檢視滑鼠的左鍵是否點選著 如果沒有點選則釋放放大鏡效果
//isMouseDown為true時顯示放大鏡
if(isMouseDown){
var point=windowToCanvas(e.clientX,e.clientY);
//console.log('point.left'+point.x+','+e.clientX+','+e.clientY)
drawcanvasWithMagnifier(true,point)
}
}
//滑鼠鬆開
canvas.onmouseup=function(e){
e.preventDefault(e);
isMouseDown=false;
drawcanvasWithMagnifier(false)
}
//滑鼠移開
canvas.onmouseout=function(e){
e.preventDefault(e);
isMouseDown=false;
drawcanvasWithMagnifier(false)
}
function drawcanvasWithMagnifier(isMouseDown,point){
context.clearRect(0,0,canvas.width,canvas.height)
context.drawImage(image,0,0,canvas.width,canvas.height);
if(isMouseDown){
//繪製放大鏡】
drawMagnifier(point)
}
}
function drawMagnifier(point){
//console.log('point.x'+point.x+'point.y'+point.y);
//滑鼠點選的位置 計算出在放大影象中的位置 計算出大圖的中心座標
var imageLG_cx=point.x*scale
var imageLg_cy=point.y*scale
//放大鏡顯示的大小 設定為200 放大鏡的半徑為200
var mr=200
//計算圓形的座標和寬高
var sx=imageLG_cx-mr;
var sy=imageLg_cy-mr;
//使用者可見的位置
var dx=point.x-mr;
var dy=point.y-mr;
context.save()
context.lineWidth=10.0;
context.strokeStyle='#069'
context.beginPath()
//圓形剪輯
context.arc(point.x,point.y,mr,0,Math.PI*2)
context.stroke();
context.clip();
context.drawImage(offcanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
context.restore()
}
}
</script>
</body>
</html>
相關推薦
轉：canvas--放大鏡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>滑鼠事件</title></head><body><canva
js例項：商品放大鏡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body{margin: 0;padding: 0;
【HTML5】Canvas 實現放大鏡效果
圖片放大鏡 效果 線上演示 原始碼 原理 首先選擇圖片的一塊區域，然後將這塊區域放大，然後再繪製到原先的圖片上，保證兩塊區域的中心點一致, 如下圖所示: 初始化 <canvas id="canvas" widt
離屏Canvas——製作放大鏡效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head>
HTML5效果：Canvas 實現圓形進度條並顯示數字百分比
實現效果 1.首先建立html程式碼 <canvas id="canvas" width="500" he
Canvas實現放大鏡效果完整案例分析（附程式碼）
本文主要記錄 `canvas` 在影象、文書處理、離屏技術和放大鏡特效的實現過程中使用到的API。先看下效果吧： 一張模糊的圖片：  { 2 ConnectivityManager connec
轉：阮一峰Flex 布局教程：實例篇
side web figure title borde 無法 ref .com 1.2 作者： 阮一峰 日期： 2015年7月14日 上一篇文章介紹了Flex布局的語法，今天介紹常見布局的Flex寫法。 你會看到，不管是什麽布局，Flex往往都可以幾行命令搞定。 我只列
轉：深入Java集合學習系列：HashSet的實現原理
是否 abstract arc html 源代碼 cat param body static 0.參考文獻 深入Java集合學習系列：HashSet的實現原理 1.HashSet概述： HashSet實現Set接口，由哈希表（實際上是一個HashMap實例）支持。它
轉：Android命令Monkey壓力測試，詳解
語句 shel gre href 輸入 white option blacklist 文件 停止Monkey命令： 1. ps命令 查找uiautomator的進程 打開cmd命令行窗口 輸入： adb shell ps | grep monkey 返回來的第一個數字，即
轉：消息隊列的使用場景
客戶端 請求 負責 之間 top 發布消息 查找 擴展 keep 一、消息隊列概述 消息隊列中間件是分布式系統中重要的組件，主要解決應用耦合，異步消息，流量削鋒等問題。實現高性能，高可用，可伸縮和最終一致性架構。是大型分布式系統不可缺少的中間件。 目前在生產環境，使用較多的
隨筆-放大鏡效果
mouseout 一半 ack ntop sam mov ret utf 放大鏡效果 <!doctype html> <html> <head> <meta charset=‘utf-8‘> <title>隨筆-放
轉：【Java集合源碼剖析】LinkedList源碼剖析
exception 循環鏈表 位置 src zab ear 方法 劃分 head 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/35787253 您好，我正在參加CSDN博文大賽，如果您喜歡我的文章，希望您
轉：【Java集合源碼剖析】Vector源碼剖析
pro try detail java 否則 super() empty init word 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/35793865 Vector簡介 Vector也是基於數
轉：【Java集合源碼剖析】LinkedHashmap源碼剖析
知識庫 csdn val ride 初始 views 特性 read details 轉載請註明出處：http://blog.csdn.net/ns_code/article/details/37867985 前言：有網友建議分析下LinkedHashMap的源
轉： 【Java並發編程】之五：volatile變量修飾符—意料之外的問題（含代碼）
功能 模式 aik 執行 方法 end bold 有變 目的 轉載請註明出處： volatile用處說明 在JDK1.2之前，Java的內存模型實現總是從主存（即共享內存）讀取變量，是不需要進行特別的註意的。而隨著JVM的成熟和優化，現在在多線程環境下vo