<!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>
请大神们帮忙看看是哪里写错了，拜托拜托。
<!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>你可以参考下
输出一下scale;看是不是等于1,等于1的话会和原图贴合,这就是看不到效果的原因.图片的宽高必须要比canvas的宽高大的才能看出放大效果