先说一下canvas元素比较有用的方法主要是canvas通过getContext()方法获取的上下文对象。canvas的坐标原点(0,0)是左上角。

其次设置颜色方面，通常有四种方法：16进制颜色值、英语单词、rgb、rgba。主要注意的是后两者，rgb的三个参数是红绿蓝0-255的值，rgba在此基础上添加了第四个参数透明度，范围0-1。

1.画线

   

 

2.画矩形

JavaScript已经是所有浏览器的默认脚本语言，因此<script>标签中无需再指定脚本类型。

3.画圆

4.写字

textBaseline和textAlign特点可以查看其他资源，就不在这混乱主题了。

5.将画保存

window.location = canvas.toDataURL('image/jpeg'); //保存图像

可以选择自己想要的格式。

6.填充和擦除实现动画

模拟一个进度条动态从左向右移动，就需要每隔一段时间画一点，使用了setInterval方法。类似思想可以使用contex.clip()方法，剪切。

 

介绍一下location对象的属性中有两类定时器，一类是一次性如setTimeout，一类是周期性如setInterval。在除IE之外的浏览器中，支持在这两个方法的第三个参数位置起添被调用函数的参数，即setInterval(func,time,param1,param2...)。而IE不支持这种做法，我就把js代码改写成下面形式，使IE中显示同样的效果。

 

//动画        var i=0;        function drawAnimation(){
    context.fillStyle = "gray";             setInterval(painting,100);          }        function painting(){            var canvas = document.getElementById('canvas');             var context = canvas.getContext('2d');               context.fillRect(i,0,10,10);              i=i+20;        }

 7.坐标变换

• 平移 context.translate(x,y) 将默认的坐标系源点盐x轴y轴分别移动指定单位长度
• 坐标缩放 context.scale(x,y) x,y是缩放的陪数
• 坐标旋转 context.rotate(angle) 旋转一定角度，angle负时逆时针旋转

坐标变换的几个方法可以实现更炫的动画效果，如下图的动态时钟，详细做法可见《canvas动态时钟》http://www.cnblogs.com/feitan/p/5160165.html。