介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title> Title</title>
& lt;/head>
& lt; body 比;
& lt; canvas id=癿yCanvas",比;
你才能的浏览器不支持画布
& lt;/canvas>
& lt; canvas id=皁ffCanvas",祝辞& lt;/canvas>
& lt; script>
var 才能;myCanvas =, . getelementbyid (“myCanvas");
var 才能;context =, myCanvas.getContext (“2 d");
var 才能;offCanvas =, . getelementbyid (“offCanvas");
var 才能;offContext =, offCanvas.getContext (“2 d");
var 才能;isMouseDown =,假;
var 才能;规模;
var 才能;image =, new 图像();
时间=window.onload 才能;function (), {
,,,myCanvas.width =, 300;
,,,myCanvas.height =, 200;
,,,image.src =,“1. jpg";
,,,image.onload =, function (), {
,,,,,offCanvas.width =, image.width;
,,,,,offCanvas.height =, image.height;
,,,,,scale =, offCanvas.width /, myCanvas.width ;
,,,,,context.drawImage(形象,0,0 myCanvas.width myCanvas.height);
,,,,,offContext.drawImage(图像,0,0);
,,,}
,,};
function 才能;windowToCanvas (x, y), {
,,,var bbox =, myCanvas.getBoundingClientRect ();
,,,return {, x : x 作用;bbox.left ,, y :, y 作用;bbox.top};
,,}
时间=myCanvas.onmousedown 才能;function (e), {
,,,e.preventDefault ();
,,,var point =, windowToCanvas (e.clientX ,, e.clientY);
,,,console.log(点);
,,,isMouseDown =,真的;
,,,drawCanvasWithMagnifier (true 的不同之处是,point );
,,};
时间=myCanvas.onmousemove 才能;function (e), {
,,,e.preventDefault ();
,,,if (isMouseDown ) {
,,,,,var point =, windowToCanvas (e.clientX ,, e.clientY);
,,,,,drawCanvasWithMagnifier (true 的不同之处是,point );
,,,}
,,};
时间=myCanvas.onmouseup 才能;function (e), {
,,,e.preventDefault ();
,,,isMouseDown =,假;
,,,drawCanvasWithMagnifier (, false );
,,};
时间=myCanvas.onmouseout 才能;function (e), {
,,,e.preventDefault ();
,,,isMouseDown =,假;
,,,drawCanvasWithMagnifier (, false );
,,};
function 才能;drawCanvasWithMagnifier (isShowMagnifier ,,点),{
,,,context.clearRect (0, 0, myCanvas.width myCanvas.height);
,,,context.drawImage(形象,0,0 myCanvas.width myCanvas.height);
,,,如果(isShowMagnifier ==, true ) {
,,,,,drawMagnifier (, point );
,,,}
,,}
function 才能;drawMagnifier (, point ), {
,,,var imageLG_cx =, point.x *, scale ;
,,,var imageLG_cy =, point.y *, scale ;
,,,var mr =, 20,;
,,,var sx =, imageLG_cx 作用;mr ;
,,,var sy =, imageLG_cy 作用;mr ;
,,,var dx =, point.x 作用;mr ;
,,,var dy =, point.y 作用;mr ;
,,,context.save ();
,,,context.lineWidth =, 5.0;
,,,context.strokeStyle =,“# 069“;;
,,,context.beginPath ();
,,,context.arc (point.x point.y,先生,0,Math.PI * 2);
,,,context.stroke ();
,,,context.clip ();
,,,context.drawImage (offCanvas, sx, sy 2 *先生,2 *先生,dx, dy, 2 *先生,2 *先生);
,,,context.restore ();
,,}
& lt;/script>
& lt;/body>
null
null
null
null
小编给大家分享一下js +帆布实现放大镜查看图片功能的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体内容如下
