canvas基础学习（二），canvas基础学习(2)_H5之家 - 中国HTML5教程资源分享第一站

2、图片放大镜

canvas放大镜 *{ margin padding style="display: block;margin: 0 auto;border: 1px solid #AAA;"> 亲，您的浏览器不支持canvas ), ctx ), canvasW = canvas.width, canvasH = canvas.height, magnifyCanvas ), mCtx ), magnifyR = 100; Image(); img.src ; img.onload = function(){ ctx.drawImage( , canvasW , canvasH); handleEvent(); } function handleEvent(){ ; canvas.onmousedown = function(e){ e.preventDefault(); draw(e); } canvas.onmouseup = function(e){ e.preventDefault(); draw(e); } canvas.onmousemove = function(e){ e.preventDefault(); ; draw(e); } canvas.onmouseout = function(e){ e.preventDefault(); draw(e); } function draw(event){ isShow ); ctx.clearRect( , canvas.width , canvas.height); ctx.drawImage(img , , canvasW , canvasH); ; canvas.getBoundingClientRect().left, y canvas.getBoundingClientRect().top; mCtx.save(); mCtx.lineWidth = 3; mCtx.strokeStyle ; mCtx.beginPath(); mCtx.arc(); mCtx.stroke(); mCtx.clip(); mCtx.drawImage(img , , , , magnifyCanvas.width, magnifyCanvas.height); mCtx.closePath(); mCtx.restore(); ctx.drawImage(magnifyCanvas, (x)) , magnifyCanvas.width , magnifyCanvas.height); } }

用的图片是