最近看了css3的三维动画效果网页，效果很赞，遂决定深入根源，本章将讲到其中的基础之一canvas作图，从网上找了资料，作此笔记，以整理自己的思绪，加深印象。
一、可以对canvas这个标签直接加css，canvas就相当于一个框，也可以将其想象成一个舞台。
canvas{
border:dashed 2px #CCC;
background-color: green;
transform: rotate3d(1,1,0,50deg);
}以上只是随便示范，想怎么写就怎么写（跟其他标签一视同仁就好），canvas特殊的地方是可以用函数在它上面画画，随便设了一个div，并没有这样的效果，以下将介绍一些搜集的简单画法及效果。
我们先搭建一个简单的，白底的画板，今天重点是作画，画板的东西之后再说好了。
<canvas id="can" width="400px" height="300px"></canvas>1、画直线
写法是用原生JS写的，JS比较烦人的就是选择器，每次都要写上一大段，现在用函数节省这一步骤。
function $$(id){
return document.getElementById(id);
}function pic() {
var canvas=$$('can');//取画布的对象
var can=canvas.getContext('2d');//通过调用canvas对象的getContext()方法来获取绘图环境，getContext()方法只需要一个参数：绘图环境的类型。可以写2d。
can.moveTo(100,100);//起点
can.lineTo(200,100);//第一条线段的终点
can.lineTo(300,200);//第二条线段的终点，还记得小时候玩过的连线游戏吗？
can.lineWidth=5;//划线的宽度
can.strokeStyle="red";//划线的颜色
can.stroke();//最重要的一步，划线的这个动作，没有这个动作，就算设定了很多样式照样画不出东西
}因为画画的是个函数，而这个函数没有被调用，所以加上pic();这句话吧，当然怎么调用，加在哪里，随你。
ps：因为想试试多条线段会怎么样，调用的时候发现了一个有趣的现象。
1）把pic();放在
<body οnlοad="pic();"> function pic() {
var canvas=$$('can');//取画布的对象
var can=canvas.getContext('2d');//通过调用canvas对象的getContext()方法来获取绘图环境，getContext()方法只需要一个参数：绘图环境的类型。可以写2d。
can.moveTo(100,100);//第一条
can.lineTo(200,100);
can.lineTo(300,200);
can.lineWidth=5;
can.strokeStyle="red";
can.stroke();
can.moveTo(1,1);//第二条
can.lineTo(130,120);
can.lineTo(240,300);
can.stroke();
can.moveTo(15,15);//第三条
can.lineTo(299,420);
can.lineTo(340,280);
}页面上只会出现2条划线，第三条不会出现。<canvas id="can" width="400px" height="300px" οnclick="pic()"></canvas>为了试验，我在最后的stroke()后面又加了2条划线：<pre name="code" class="javascript"> function pic() {
var canvas=$$('can');//取画布的对象
var can=canvas.getContext('2d');//通过调用canvas对象的getContext()方法来获取绘图环境，getContext()方法只需要一个参数：绘图环境的类型。可以写2d。
can.moveTo(100,100);//第一条
can.lineTo(200,100);
can.lineTo(300,200);
can.lineWidth=5;
can.strokeStyle="red";
can.stroke();
can.moveTo(1,1);//第二条
can.lineTo(130,120);
can.lineTo(240,300);
can.stroke();
can.moveTo(15,15);//第三条
can.lineTo(299,420);
can.lineTo(340,280);
can.moveTo(10,10);//第四条
can.lineTo(233,51);
can.lineTo(400,480);
}结果是按第一下，出现2条，再按一下，stroke()后面加的划线就一起出来了；可以亲自试一下，有点意思。又作死将画布的大小调小，然后将画布的overflow设置成visible，线只能看到画布大小的露出来的部分，将z-index调成很高也没有用，在画布之外的线仿佛进入了异次元空间一样，不见了就是不见了，所以...那些线去哪了？
2、给直线上色，为了使直线的颜色不单调，可以给直线上渐变色。控制线的颜色的是：
can.strokeStyle="red";var git1=can.createLinearGradient(0,0,100,100);//起点座标0,0终点座标100,100的一条渐变线
git1.addColorStop(0,'green');
git1.addColorStop(1,'yellow'); <pre name="code" class="html">can.strokeStyle=git1;在pic()里面加上这段话，当然要确保其是最后控制颜色的语句，这句话是有依据滴，大家不妨尝试一下。
谈到颜色不得不说一下beginPath()和closePath()，如果把git1颜色加在red的这句语句后面，不管中间画了多少条线，颜色都会变成git1，是因为路径的原因，如果想要画出不同的颜色的线段，就先用closePath()关闭路径，然后再用beginPath()开启一个新路径，如果只是关闭，并不会开启一个新路径。如果beginPath()没有设置新的颜色，那么会沿用最后一个beginPath()里的颜色设置。并且具备回溯功能，即如果第一个path没有设置，第三个path设置了，第一个path会用第三个path的，但不会使用第二个path的，如果第三个path没有设置颜色，那个第一个和第三个path都会使用设置了颜色的第二个path。
ps：上面那团线性颜料对所有在画布的（0,0,100,100）这条线的垂直线到画布交界的这块范围都有效，并且渐变是按起点到终点这样的颜色渐变的，如果画了一条
can.moveTo(0,100);
can.lineTo(100,0);这条线的颜色是不会变的=。=，往不同方向划线，你们会明白我所说的。
3、画矩形
can.rect(30,30,340,240);//起点，长，宽can.strokeRect(30,30,340,240);画填充的矩形
can.fillStyle = 'yellow';
can.fillRect(30,30,340,240);可以用git1填充，如果想填充整个长方形，需要将git1调成:
can.createLinearGradient(30,30,370,30)4、画圆形
！！！一开始就是冲着画圆来看的canvas
arc(x,y,半径，开始角，结束角，是不是逆时针），记住上面那张图，一切都在掌握之中
fill和stroke的颜色是不一样的，需各自设置。
5、圆形渐变！！
首先圆形渐变和线性渐变一样，不在乎容器长得怎样，装得下就装下，装不下的部分就不显示。
圆形渐变有两个点，本色的圆圈，负责渐变范围的圆圈，createRadialGradient(Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd)；我们印象里的圆形渐变是从一个点的颜色渐渐变成另一种颜色，是以水波纹似的扩展出去的，将start理解为开始的那个点，那个点是有大小的，即原色是有大小的，将end理解为控制渐变结束的交界处，如果开始的圆与负责控制渐变范围的圆外离，变色范围为两个圆的外切线与边界的交界合起来的范围。
例如：
var gnt=can.createRadialGradient(50,550,50,500,0,300);
gnt.addColorStop(0,'red');
gnt.addColorStop(1,'#000');
can.fillStyle = gnt;
can.fillRect(0,0,1000,600);addColorStop(1,xxx);即最后变成的颜色，
当然可以加上0-1的范围控制颜色变化的速度什么的
经过一天的研究，对canvas作图有了一定的了解，本文为读书笔记类型，也许会与其他文章有相似处
暂记得的参考资料：
http://jo2.org/html5-canvas-beginpath-important/
http://www.w3school.com.cn/tags/canvas_arc.asp