canvas学习与应用
作为一名有格调的前端工程师（页面切图仔。。），这年头要是不懂得canvas是神马玩意，那可就真的low了。
于是，抱着自我反省的态度，我要来学习一下canvas这个好玩的绘图工具。
canvas的默认宽度是300px,默认高度是150px。这是不对canvas设置宽高时的默认显示宽高。
一：canvas的API
canvas在页面内容上只是一个标签，
<canvas id="canvas">你的浏览器不支持canvas!</canvas>
当然，可以直接在标签中设置canvas画布的宽高属性，也可以在js中规定宽高。
<canvas id="canvas" width="600" height="400">你的浏览器不支持canvas!</canvas>
对于canvas的样式最好交给css来处理，比如：
#canvas{ display:block; //只有加上block，下面的居中才会有反应，说明canvas不是块级元素 margin:0 auto; border:1px solid #aaa; }
OK，下面就要用js来操作canvas了，首先获取canvas对象（画布），然后获取对应的画笔对象canvas.getContext('2d');
var canvas = document.getElementById('canvas'); //获取canvas对象(画布) var ctx = canvas.getContext('2d'); //获取对应的画笔对象
canvas.width = 800; //定义画布宽度
canvas.height = 600; //定义画布高度
canvas元素绘制图像的时候有两种方法，分别是
ctx.fill()//填充
ctx.stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式
ctx.fillStyle//填充的样式
ctx.strokeStyle//边框样式
ctx.lineWidth//图形边框宽度
颜色的表示方式:
直接用颜色名称:"red" "green" "blue"
十六进制颜色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
和GDI是如此的相像，所以用过GDI的朋友应该很快就能上手
二：绘制直线
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = 300; canvas.height = 150; ctx.strokeStyle = '#aaa'; ctx.lineWidth = 10; ctx.lineCap = 'square'; ctx.beginPath(); ctx.moveTo(5,5); //起点 ctx.lineTo(200,100); //终点 ctx.stroke(); ctx.closePath();
(1)每个canvas上下文仅有一个当前Path
(2)通过beginPath方法开启一个Path，closePath方法来结束一个Path
(3)Path有两个基本的方法moveTo()和lineTo()
(4)lineCap有三个属性：butt(默认)边缘是平的,与当前线条垂直；round:边缘是半圆,该半圆的直径是当前线条的长度;square:边缘是长方形,该长方形的长是当前线条的宽度,宽是当前线条宽度的一半;
(5)lineWidth属性用来设置线条的宽度
(6)strokeStyle属性用来定义当前线条的颜色及样式
var canvas = document.getElementById('canvas'); //获取canvas对象(画布) var ctx = canvas.getContext('2d'); //获取对应的画笔对象 canvas.width = 800; canvas.height = 600; ctx.strokeStyle = '#FF9933'; //线条的颜色 ctx.lineWidth = 10; //线条的宽度 ctx.lineCap = 'roound'; //线条两边的形状 //注意，canvas的坐标系是：canvas画布的左上角为原点(0,0),向右为横坐标，向下为纵坐标，单位是像素px //开始一个新的绘制路径 ctx.beginPath(); ctx.moveTo(50, 50); //定义直线额起点坐标为(50,50) ctx.lineTo(350, 250); //定义直线的终点坐标为(350,250) ctx.moveTo(50, 240); ctx.lineTo(360, 60); ctx.moveTo(50, 200);
ctx.lineTo(300, 40); //沿着坐标点顺序的路径绘制直线 ctx.stroke(); //关闭当前的绘制路径 ctx.closePath();
三：绘制曲线及圆弧
arc(x, y, radius, startRad, endRad, anticlockwise)
在canvas画布上绘制以坐标点(x,y)为圆心、半径为radius的圆上的一段弧线。这段弧线的起始弧度是startRad，结束弧度是endRad。这里的弧度是以x轴正方向(时钟三点钟)为基准、进行顺时针旋转的角度来计算的。anticlockwise表示是以逆时针方向还是顺时针方向开始绘制，如果为true则表示逆时针，如果为false则表示顺时针。anticlockwise参数是可选的，默认为false，即顺时针。
var canvas = document.getElementById('canvas'); //获取canvas对象(画布) var ctx = canvas.getContext('2d'); //获取对应的画笔对象 canvas.width = 800; canvas.height = 600; //开始一个新的绘制路径 ctx.beginPath(); //设置弧线的颜色为蓝色 ctx.strokeStyle = 'blue'; var circle = { x:100, //圆心的x轴坐标值 y:100, //圆心的y轴坐标值 r:50 //圆的半径 }; //沿着坐标点(100,100)为圆心，半径为50px的圆的顺时针方向绘制弧线 ctx.arc(circle.x,circle.y,circle.r,0,Math.PI/2,false); //false是顺时针方向，true表示逆时针方向 //按照指定的路径绘制弧线 ctx.stroke();
四：canvas绘制一个八卦
<canvas id="canvas">你的浏览器不支持canvas!</canvas>
#canvas{ display:block; margin:0 auto; border:1px solid #aaa; background:#E1E1FF; }
document.body.style.backgroundColor = '#eee'; var canvas = document.getElementById('canvas'); //获取canvas对象(画布) var ctx = canvas.getContext('2d'); //获取对应的画笔对象 canvas.width = 400; canvas.height = 500; //绘制白色半圆 ctx.beginPath(); ctx.arc(200,200,80,1.5*Math.PI,Math.PI/2,false); ctx.fillStyle = 'white'; ctx.closePath(); ctx.fill(); //绘制黑色半圆 ctx.beginPath(); ctx.arc(200,200,80,Math.PI/2,1.5*Math.PI,false); ctx.fillStyle = 'black'; ctx.closePath(); ctx.fill(); //绘制黑色小圆 ctx.beginPath(); ctx.arc(200,240,40,0,Math.PI*2,false); ctx.fillStyle = 'black'; ctx.closePath(); ctx.fill(); //绘制白色小圆 ctx.beginPath(); ctx.arc(200,160,40,0,Math.PI*2,false); ctx.fillStyle = 'white'; ctx.closePath(); ctx.fill(); //绘制白色小圆心 ctx.beginPath(); ctx.arc(200,160,5,0,Math.PI*2,false); ctx.fillStyle = 'black'; ctx.closePath(); ctx.fill(); //绘制黑色小圆心 ctx.beginPath(); ctx.arc(200,240,5,0,Math.PI*2,false); ctx.fillStyle = 'white'; ctx.closePath(); ctx.fill(); //绘制文字 ctx.save(); ctx.fillStyle = 'black'; ctx.globalAlpha = '0.4'; ctx.textAlign ='center'; ctx.font = '32px Arial'; ctx.shadowColor="rgba(0,0,0,0.4)"; ctx.shadowOffsetX=15; ctx.shadowOffsetY=-10; ctx.shadowBlur=2; ctx.fillText('Hello Canavs',200,100);//IE不支持 ctx.restore();
