其他浏览器都是好的,为什么呢?求高人指点!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas-mouse</title> <style type="text/css"> /**{margin:0;padding:0;}*/ </style> </head> <body> <canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #f00">您的浏览器不支持Canvas,请更换浏览器!</canvas> <canvas id="off-canvas" style="display:none;">您的浏览器不支持Canvas,请更换浏览器!</canvas> <script type="text/javascript"> var canvas = document.getElementById('canvas') var offCanvas = document.getElementById('off-canvas') var context = canvas.getContext("2d") var offContext = offCanvas.getContext("2d") var isdMouseDown = false var img = new Image(),scale canvas.width = 800 canvas.height = 530 img.src = "treehouse.jpg" img.onload = function () { offCanvas.width = img.width offCanvas.height = img.height scale = offCanvas.width/canvas.width context.drawImage(img,0,0,canvas.width,canvas.height) offContext.drawImage(img,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() var point =windowToCanvas(e.clientX,e.clientY) console.log(point.x,point.y) isdMouseDown = true drawCanvasByMagnifier(true,point) } canvas.onmousemove = function (e) { e.preventDefault() if (isdMouseDown) { var point =windowToCanvas(e.clientX,e.clientY) console.log(point.x,point.y) drawCanvasByMagnifier(true,point) }; } canvas.onmouseup = function (e) { e.preventDefault() isdMouseDown = false drawCanvasByMagnifier(false) } canvas.onmouseout = function (e) { drawCanvasByMagnifier(false) e.preventDefault() isdMouseDown = false } function drawCanvasByMagnifier (isShowMgn,point) { context.clearRect(0,0,canvas.width,canvas.height) context.drawImage(img,0,0,canvas.width,canvas.height) if (isShowMgn) { drawMagnifier(point) }; } function drawMagnifier(point) { var imgLG_cx = point.x*scale var imgLG_cy = point.y*scale var mr = 100 var sx = imgLG_cx - mr var sy = imgLG_cy -mr var dx = point.x - mr var dy = point.y - mr context.save() context.lineWidth = 10.0 context.strokeStyle = "#069" context.beginPath() context.arc( point.x,point.y,mr,0,Math.PI*2) context.stroke() context.clip() context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr) context.restore() } </script> </body> </html>
我想说我把图片路径换了就行了你信么