本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。
一个奇怪的问题
下面代码是在canvas上绘制一个100*100的矩形：
canvas基础练习
运行结果如下： 
咦？奇怪，我们明明画的是正方形啊，怎么变长方形了？检查代码，也没有问题呀！
我们尝试改下代码吧！去掉样式中的width和height属性：
canvas基础练习
再看运行结果： 
正常了！
比较下两份代码的区别，第二份只是在样式中去掉了width和height属性，其他一模一样。
后来经过查阅资料发现，canvas默认画布大小为300px*150px，相当于一张图片。而css设置的width和height属性，则相当于对这张图片进行拉伸处理。
立即学习“前端免费学习笔记（深入）”；
这样我们不难发现：第一张图其实是将第二张图300px*150px进行拉伸为200px*200px后的结果。
那么如何正确设置canvas画布的大小，而不导致图像变形呢？
有两种方法：
//第一种:在html标签中静态设置
绘制路径
canvas基础练习
运行效果： 
绘制文本
canvas基础练习
运行效果如下： 
转换
canvas基础练习
运行效果： 
阴影
canvas绘图
