为什么这段代码在chrome里显示异常？-慕课网

为什么这段代码在chrome里显示异常？

来源：3-4 离屏Canvas 使用剪辑区域优化

七月小麦麦

2016-04-09 08:00

其他浏览器都是好的，为什么呢？求高人指点！

<!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>

写回答关注