在drawImage方法中，通过缩放第二块画布的带下，实现图像的实时缩放显示，再利用画布环境的 imageSmoothingEnabled 属性，实现图像的反锯齿平滑
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<canvas id="zoom" width="200" height="200"></canvas>
<label for="smoothbtn">
<input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">使图像平滑放大
</label>
</body>
<script>
var img = new Image();
img.src = './gugong.jpg'
img.onload = function(){
draw(this);
}
function draw(img){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
img.style.display = "none";
var zommctx = document.getElementById("zoom").getContext("2d");
var smoothbtn = document.getElementById("smoothbtn");
var toggleSmooth = function(event){//开启关闭抗锯齿，浏览器兼容
zommctx.imageSmoothingEnabled = this.checked;
zommctx.mozImageSmoothingEnabled = this.checked;
zommctx.webkitImageSmoothingEnabled = this.checked;
zommctx.msImageSmoothingEnabled = this.checked;
}
smoothbtn.addEventListener("change", toggleSmooth);
var zoom = function(event){
var x = event.layerX;
var y = event.layerY;
//获取鼠标位置并裁剪出距左和上5像素，距右和下5像素图片，然后将这幅图复制到另一个画布将图片调整到想要的大小，在缩放画布里将10*10像素的对原画布剪裁调整为200*200
document.getElementById("zoom").getContext("2d").drawImage(canvas,Math.abs(x-5),Math.abs(y-5),10,10,0,0,200,200);
}
canvas.addEventListener("mousemove", zoom);
}
</script>