canvas 放大镜_前端开发者

采用canvas实现放大镜功能，只需要使用一个方法。。。

这个方法有三种使用情况：

1、drawImage(img,x,y)

三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。

2、drawImage(img , x , y , w , h)

与第一中情况相比，多了两个参数，分别代表所绘图像的宽度和高度。

3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);

9个参数，分别是：图像元素，被复制区域在原画布中的起始横坐标、被复制区域在原画布中的起始纵坐标、被复制区域的宽度、被复制区域的高度、复制后目标图像在画布中的起始横坐标、复制后目标图像在画布中的起始纵坐标、复制后目标图像的宽度、复制后目标图像的高度。
因此这种情况下可以将某幅图像的局部区域复制到另一个画布中的某个位置。

代码：

html 代码

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a>> <<a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a>> <head> <meta charset="UTF-8"> <title>cavas放大镜</title> <style type="text/<a href="https://www.rokub.com/category/css" title="css" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">css</a>"> * {padding: 0; margin: 0;} .wrap {width: 1000px; height: 650px; border: 1px solid black; margin: auto; position: relative; overflow: hidden;} #canvas {border: 1px solid black; border-radius: 50%; position: absolute; display: none;} #myCanvascanvas {border: 1px solid black;} </style> </head> <body> <div class="wrap"> <canvas id="myCanvas" width="" height=""></canvas> <canvas id="canvas" width="150" height="150"></canvas> </div> </body> <script type="text/javascript"> var wrap = document.querySelector(‘.wrap’); var imgCanvas = document.querySelector(‘#myCanvas’); var canvas = document.querySelector(‘#canvas’); var context = imgCanvas.getContext(‘2d’); var con = canvas.getContext(‘2d’);//设置绘制环境 imgCanvas.width = wrap.offsetWidth; //画布宽度 imgCanvas.height = wrap.offsetHeight;//画布高度 var img = new Image();//定义一个img对象 img.src = ‘https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1477919496&di=6e533d0b2ce65815e154908237f2d43e&src=http://imgsrc.baidu.com/forum/pic/item/7a79e1edab64034f924b368eafc379310b551d32.jpg’; //图片加载事件 img.onload = function(){ img.width= imgCanvas.width; img.height= imgCanvas.height; context.drawImage(img,0,0); con.drawImage(img,0,0); } //鼠标移入事件 wrap.addEventListener(‘mouseover’,down,false); //鼠标移除出事件 wrap.addEventListener(‘mouseout’,up,false); function down(){ canvas.style.display = ‘block’; //鼠标移动事件 wrap.addEventListener(‘mousemove’,move,false); } function move(){ var ev = window.event || event; //使鼠标显示在画布的中间 var newX = ev.clientX – canvas.width/2 – wrap.offsetLeft; var newY = ev.clientY – canvas.height/2 – wrap.offsetTop; canvas.style.top = newY + ‘px’; canvas.style.left = newX + ‘px’; con.drawImage(img,newX + 40, newY + 40, 150,150,0,0,400,400); } function up(){ canvas.style.display = ‘none’; //移除鼠标移动事件 imgCanvas.removeEventListener(‘mousemove’,move,false); } </script> </<a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a>>

canvas 放大镜

采用canvas实现放大镜功能，只需要使用一个方法。。。

这个方法有三种使用情况：

1、drawImage(img,x,y)

2、drawImage(img , x , y , w , h)

3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);

代码：

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

采用canvas实现放大镜功能，只需要使用一个方法。。。

这个方法有三种使用情况：

1、drawImage(img,x,y)

2、drawImage(img , x , y , w , h)

3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);

代码：

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发