canvas绘画常用方法
先说一下canvas元素比较有用的方法主要是canvas通过getContext()方法获取的上下文对象。canvas的坐标原点(0,0)是左上角。
其次设置颜色方面，通常有四种方法：16进制颜色值、英语单词、rgb、rgba。主要注意的是后两者，rgb的三个参数是红绿蓝0-255的值，rgba在此基础上添加了第四个参数透明度，范围0-1。
1.画线
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function drawLine(id){ var canvas = document.getElementById(id); //获取上下文对象，canvas很多常用方法都是基于这个对象实现的 var context = canvas.getContext("2d"); //目前参数只有2d context.lineWidth = 5; //线条宽度 context.moveTo(10,10); //光标移到这点 context.lineTo(10,50); //下一点坐标 context.lineTo(100,50); //下一点坐标 context.lineTo(150,150); //下一点坐标 context.stroke(); //绘制路径 } </script> <head> <body onload="drawLine('canvas')" > <canvas id="canvas" width="200px" height="200px"></canvas> </body> </html>
2.画矩形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //画矩形 function drawRect(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "gray"; //填充颜色 context.strokeStyle = "#f60"; //边框颜色 context.lineWidth = 5; //边框宽度 context.fillRect(0,0,400,300); //参数：x,y,width,height。绘制“已填色”的矩形,默认填充颜色是黑色 context.strokeRect(80,80,180,120); //参数：x,y,width,height。绘制未填色的矩形,默认填充颜色是黑色 context.strokeRect(110,110,180,120); } </script> <head> <body onload="drawRect('canvas');"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
JavaScript已经是所有浏览器的默认脚本语言，因此<script>标签中无需再指定脚本类型。
3.画圆
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //画圆形 function drawArc(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "#f1f2f3"; context.fillRect(0,0,400,400); for(var i=1; i<10; i++){ context.beginPath(); //路径开始
//arc参数：x,y,半径,开始角度,结束角度,是否按顺时针方向 i % 2 ? context.arc(200,200,10*i,0,Math.PI,true): context.arc(200,200,10*i,0,Math.PI,false); context.closePath(); //路径关闭 context.fillStyle = "rgba(255,0,0,0.25)"; //填充颜色 context.fill(); //绘制 } } </script> <head> <body onload="drawArc('canvas');"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
4.写字
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //写字 function drawText(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); context.fillStyle = "gray"; context.fillRect(0,0,800,300); context.fillStyle = '#fff'; context.strokeStyle = '#fff'; context.font = "bold 40px '微软雅黑'"; //设置字体 //context.textBaseline = 'Top'; context.textAlign = 'start'; 文字相对于浏览器顶部和左侧的对齐方式 context.fillText('Canvas',50,50); context.strokeText('Canvas',70,100); } </script> <head> <body onload="drawText('canvas');"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
textBaseline和textAlign特点可以查看其他资源，就不在这混乱主题了。
5.将画保存
window.location = canvas.toDataURL('image/jpeg'); //保存图像
可以选择自己想要的格式。
6.填充和擦除实现动画
模拟一个进度条动态从左向右移动，就需要每隔一段时间画一点，使用了setInterval方法。类似思想可以使用contex.clip()方法，剪切。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <script> //动画 var i=60; function drawAnimation(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = "gray"; context.fillRect(0,0,10,10); context.fillRect(20,0,10,10); context.fillRect(40,0,10,10); setInterval(painting,100,context); //时间单位是毫秒 } function painting(context){ context.fillRect(i,0,10,10); context.clearRect(i-60,0,10,10); i=i+20; } </script> <head> <body onload="drawAnimation()"> <canvas id="canvas" width="400px" height="400px" ></canvas> </body> </html>
介绍一下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。
