不能出現放大鏡效果。
<!DOCTYPE html>
<html>
<head lang="en">
? ?<meta charset="UTF-8">
? ?<title></title>
</head>
<style>
body {
? ? ? ?background: #000;
}
? ?#canvas {
? ? ? ?display: block;
margin: 0px auto;
border: 1px solid #aaaaaa;
}
? ?#scale-range {
? ? ? ?display: block;
margin: 20px auto;
width: 800px;
}
? ?#off-canvas {
? ? ? ?display: none;
}
</style>
<body>
<canvas id="canvas">你的瀏覽器尚不支持canvas</canvas>
<canvas id="off-canvas">你的瀏覽器尚不支持canvas</canvas>
<script>
var canvas = document.getElementById("canvas");
var offCanvas = document.getElementById("off-canvas");
var context = canvas.getContext("2d");
var offContext = canvas.getContext("2d");
var image = new Image();
var isMouseDown = false;
var scale;
window.onload = function() {
canvas.width = 1152;
canvas.height = 768;
image.src = "images/img-lg.jpg";
? ? ? ?
image.onload = function () {
offCanvas.width = image.width;
offCanvas.heigth = image.height;
scale = offCanvas.width / canvas.width;
context.drawImage(image, 0, 0, canvas.width, canvas.height);
offContext.drawImage(image, 0, 0);
? ? ? ?}
? ?}
function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left,
y: y - bbox.top
}
? ?}
? ?
canvas.onmousedown = function (e) {
e.preventDefault();
// ? ? ? ?console.log(e.clientX, e.clientY);
point = windowToCanvas(e.clientX, e.clientY);
// ? ? ? ?console.log(point.x, point.y);
isMouseDown = true;
drawCanvasWidthMagnifier(true, point);
? ?}
canvas.onmouseup = function (e) {
e.preventDefault();
isMouseDown = false;
drawCanvasWidthMagnifier(false);
? ?}
canvas.onmouseout = function (e) {
e.preventDefault();
isMouseDown = false;
drawCanvasWidthMagnifier(false);
? ?}
canvas.onmousemove = function (e) {
e.preventDefault();
if (isMouseDown == true) {
point = windowToCanvas(e.clientX, e.clientY);
// ? ? ? ? ? ?console.log(point.x, point.y);
drawCanvasWidthMagnifier(true, point);
? ? ? ?}
? ?}
function drawCanvasWidthMagnifier(isShowMagnifier, point) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0, 0, canvas.width, canvas.height);
if(isShowMagnifier == true) {
drawMagnifier(point);
? ? ? ?}
? ?}
function drawMagnifier(point) {
var imageLG_cx = point.x * scale;
var imageLG_cy = point.y * scale;
var mr = 200;
var sx = imageLG_cx - mr;
var sy = imageLG_cy - mr;
var dx = point.x - mr;
var dy = point.y - mr;
context.drawImage(offCanvas, sx, sy, 2*mr, 2*mr, dx, dy, 2*mr, 2*mr);
? ?}
</script>
</body>
</html>
請大神們幫忙看看是哪里寫錯了，拜托拜托。
2016-10-21
<!doctype?html> <html> <head> <meta?charset="UTF-8"> <title>Document</title> </head> <body> <canvas?id="canvas"?style="border:1px?solid?#aaa;display:block;margin:0?auto;"></canvas> <canvas?id="offCanvas"?style="display:none"></canvas> <div?style="margin:20px?auto;text-align:center;">點擊更換放大鏡邊框顏色： <a?href="#"?onclick="colorGreen()"?style="color:green">綠色</a> <a?href="#"?onclick="colorRed()"?style="color:red">紅色</a> <a?href="#"?onclick="colorBlue()"?style="color:Blue">藍色</a> <a?href="#"?onclick="colorRandom()"?style="color:#909">隨機</a> </div> <script?type="text/javascript"> 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;?//放大倍數 var?color="#666";//放大鏡顏色 window.onload=?function(){ ??canvas.width?=?1152 ????????????canvas.height?=?768 image.src="img.jpg" 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); } } //坐標轉換 function?windowToCanvas(x,y){ //獲得canvas的包圍盒 var?bbox?=?canvas.getBoundingClientRect(); return?{x:x-bbox.left,y:?y?-bbox.top} drawCanvasWithMagnifier(?true,?point); } ????//鼠標點擊事件 canvas.onmousedown?=function(e){ e.preventDefault() var?point?=windowToCanvas(e.clientX,e.clientY);?//鼠標點擊位置 console.log(point.x,point.y); isMouseDown?=true; drawCanvasWithMagnifier(?true,?point); } //點擊鼠標左鍵同時移動鼠標事件 canvas.onmousemove?=function(e){ e.preventDefault()//禁止默認響應事件 if(?isMouseDown?==true){ var??point?=?windowToCanvas(e.clientX,e.clientY) console.log(point.x,point.y); drawCanvasWithMagnifier(?true,?point); } } ??//鼠標松開事件 canvas.onmouseup?=function(e){ e.preventDefault()//禁止默認響應事件 isMouseDown?=false; drawCanvasWithMagnifier(false); } //鼠標離開canvas畫布事件 canvas.onmouseout?=function(e){ e.preventDefault()//禁止默認響應事件 isMouseDown?=false; drawCanvasWithMagnifier(?false); } //是否繪制放大鏡 function?drawCanvasWithMagnifier(?isShowMagnifier?,?point?){ ????????????context.clearRect(?0?,?0?,?canvas.width?,?canvas.height?) ????????????context.drawImage(?image?,?0?,?0?,?canvas.width?,?canvas.height?) ????????????if(?isShowMagnifier?==?true?){ ????????????????drawMagnifier(?point?) ????????????} ????????} function?drawMagnifier(point){ //圖片放大之后的坐標 var?imageLG_cx?=?point.x*?scale? var?imageLG_cy?=?point.y*?scale 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=color; context.beginPath(); context.arc(point.x,point.y,mr,0,2*Math.PI); context.stroke(); context.clip(); context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr); context.restore(); } function?colorRed(){ color="red"; } function?colorGreen(){ color="green"; } function?colorBlue(){ color="blue"; } function?colorRandom(){ var?color1=Math.ceil(Math.random()*255); ???var?color2=Math.ceil(Math.random()*255); var?color3=Math.ceil(Math.random()*255); color="rgb("+color1+","+color2+","+color3+")"; } </script> } </body> </html>你可以參考下
2017-08-09
輸出一下scale;看是不是等于1,等于1的話會和原圖貼合,這就是看不到效果的原因.圖片的寬高必須要比canvas的寬高大的才能看出放大效果