                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas玩转图像处理

不能出现放大镜效果。

<!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>

请大神们帮忙看看是哪里写错了，拜托拜托。

qq_颗粒_0

2016-10-18

源自：Canvas玩转图像处理 3-3

关注问题我要回答

1681

操作

收起

2 回答

柠檬萌不萌回答被采纳 +3 积分
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>

你可以参考下