本节主要是canvas各种用法的示例，先解决一个我在应用canvas绘图过程中的一个问题，相信大家可能也遇到过。
一个奇怪的问题
下面代码是在canvas上绘制一个100*100的矩形：
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//设置矩形填充颜色为红色
context.fillStyle = "red";
//从(10，10)位置绘制100*100的正方形
context.fillRect(10,10,100,100);
};
</script>
运行结果如下：
咦？奇怪，我们明明画的是正方形啊，怎么变长方形了？检查代码，也没有问题呀！
我们尝试改下代码吧！去掉样式中的width和height属性：
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas1");
var context = canvas.getContext("2d");
//设置矩形填充颜色为红色
context.fillStyle = "red";
//从10，10位置绘制100*100的正方形
context.fillRect(10,10,100,100);
};
</script>
再看运行结果：
正常了！
比较下两份代码的区别，第二份只是在样式中去掉了width和height属性，其他一模一样。
后来经过查阅资料发现，canvas默认画布大小为300px*150px，相当于一张图片。而css设置的width和height属性，则相当于对这张图片进行拉伸处理。
这样我们不难发现：第一张图其实是将第二张图300px*150px进行拉伸为200px*200px后的结果。
那么如何正确设置canvas画布的大小，而不导致图像变形呢？
有两种方法：
//第一种:在html标签中静态设置
