Question

HTML5、JS的canvas绘制图片的问题。。

我用ctx.drawImage(image,X,Y,W,H,X,Y,W,H),把一张图片的不同部分绘制在不同的canvas上,但是我从图片上抠一块宽W高H的部分，绘制在宽W高H的canvas上，宽度和高度硬是不对劲，有时要把宽度*2，有时高度要/2。
例如：ctx.drawImage(image,450,0,150,160,0,0,150,160); 图片宽高不对，会有拉伸（高度正常，宽度只有一半），这样写：ctx.drawImage(image,450,0,150,160,0,0,300,160);才正常显示，
又如：ctx.drawImage(image,300,480,300,320,0,0,300,320);图片不正常显示（宽度正常，高度为两倍），这样写：ctxnine.drawImage(image,300,480,300,320,0,0,300,160);就正常了。
而且不同canvas上绘制出来的图片清晰度也不一样，有的模糊，有的就清晰。
求解释这两个问题。

Answer 1

按照你的描述，估计你之前的代码有调用过 ctx.scale 或者 ctx.transform 函数，导致坐标轴被缩放了。

建议找到对应的缩放调用，合理使用 ctx.save 和 ctx.restore 函数，来避免上下文环境污染

追问

我没有进行任何坐标变换，问题已经找到了，我之前是在里面设置canvas的width和height，就会出现上面的问题，当我直接在canvas标签里面设置width,height的时候就一切正常。虽然知道了问题在哪，但是还是不知道为什么。