                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /Canvas玩轉圖像處理

為什么這段代碼在chrome里顯示異常？

其他瀏覽器都是好的，為什么呢？求高人指點！

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