感谢！这个问题太有用了！我之前的代码一塌糊涂，bindtouchstart获取到的坐标是按css中的width和height算的，而canvas中的像素点又是另一套系统，把css中的坐标转换到canvas上的坐标需要把css的X坐标*canvas width/style width。

比如wxml里写<canvas style="width:100px; height:100px">，而js中写canvas.width=200，canvas.height=200，在bindtouchstart里获取到的x,y为（15，20），那么想要在对应的位置画一个长*高的长方形就应该是fillrect(15*200/100，20*200/10，长，高）而不是fillrect(15,20,长，高）。

这样理解：

比如我们在生活中要挑选一块画布用来画画，当我们去市集上挑选画布的时候，发现画布的尺寸大小有各种各样的，但是我们的画板大小是500*500的，所以我们需要挑选一块500*500的画布，在这里我们需要使用第一种写法：

<canvas id="canvas" width="500" height="500">

　　您的浏览器不支持Canvas

</canvas>

来挑选正确的合乎画板尺寸的画布，因为这种写法正好是为了我们挑选画布的尺寸而设计的。

买回来画布后，我们需要绘制更大更宽的画，所以我们把原来的画板尺寸增加了，但是我们又不想麻烦再跑市集一趟去挑选画布，这里假设我们之前买的画布是有弹性的，可以被拉伸并且可以正常使用。

这种情况下就可以使用css中的width和height属性设置画布的宽和高（行内样式和内联样式）来拉伸画布的大小，但是这里需要注意一点的是：我们是在画布默认尺寸大小300*150的基础上面拉伸的。但是经过拉伸后的画布在绘制图画的时候会跟预想的结果不太一样。