HTML5中canvas标签的使用
    最近直接是跟图片结上缘了，前有一个相册的功能让我来负责，现在又是一个头像编辑的功能负责，这个完了之后还有一个关于图片的功能要负责。
    先说说最近的这个功能吧，其实这个功能就跟新浪微博中的那个头像编辑功能是一样的。不过新浪微博的那个头像编辑功能是用flash实现的，而自己也不会flash。所以只能通过另一种方式，使用js和css在前台来控制用户有那种剪裁的视觉效果，然后在把剪裁的坐标传回后台，让后台来实现对图片的剪裁。开始找到了jquery的jcrop插件，很容易的实现动态拖动剪裁框，实时有预览效果。但是这个插件并不能实现图片的旋转，所以想到用html中的canvas来实现图片的旋转。
刚开始通过后台传递过来的上传的图片的服务地址，但是新建一个Imgae的对象，然后通过drawImage(img, 0, 0, img.width,img.height); 方法来绘制这张图片到canvas上，但是不管怎么样图片就是不能绘制，后来我在这个方法执行之前加了个alert，图片竟然会绘制出来。这样我想应该是在这个绘制方法执行之前可能是img并没有完全加载完，后来竟然想着是否加延时。但是通过谷歌发现，其实可以执行

img.onload=function(){   
     context.drawImage(img, 0, 0, img.width, img.height);
}  

，这个就是检查如果img加载完在执行这个方法，问题解决！