我所遇到的canvas上绘制图片，绘制不上去的问题。

场景

哈哈哈，笑死我吧。前几天在做一个H5的时候，给自己挖了个坑，然后跳进去好久，出不来了，最终被大师给救出来了。
该H5是换装类的H5，我要根据用户点击选择的不同衣服、鞋子等搭配，在画布上绘制不同的图片，也就是清除画布和重绘，然后呢，就会出现多张图片绘制是吧。

做法

以前我是这样在canvas上绘制图片的

var img = new Image();
img.onload = function() {
//图片加载完成后的操作
};
img.src = '某某某';

这次我没有这样做，想着不用onload函数，先把所有图片加载完再去绘制，但是我犯了一个错误，在创建一个image对象后，因为我需要对图片的宽度进行操作，就是img.width = img.width/2，但是我把这代码直接写在了var img = new Image()的下面，然后怎么弄图片都绘制不到画布上。原因是什么呢？是因为应该把给图片宽度重新赋值的操作放到onload方法里面。
重点来了，图片加载完成之后，对image对象的宽度进行操作是OK的，但是图片还未加载完成，img.width为0，如果进行img.width = img.width/2的操作，那图片的宽度是不是就为0了。这样即使图片已经被加载完，但是没有宽度，绘制到画布上当然看不到了，何况我使用drawImage()方法绘制的时候指定的图片宽度为Image对象自身的宽度。

总结

经过这次自己挖坑自己踩后，我就记住了！