html5的canvas的一些初学总结

今天开始学习了html5的canvas，个人感觉真的是十分强大啊。各种效果，只有你想不到，没有你做不到。当然自己还是初学阶段，只能见识一下大牛们的效果。自己就慢慢学习了。下面就说一些自己所学的到有关canvas的知识吧。

1.<canvas>这个标签本身挺简单的，属性也就这么几个，比如设置宽和高。你可以这么写<canvas width="1000"  height="1000"></canvas>。当然这样呈现在网页上是没效果的。还是要用css才能使它显现出来。<canvas width="1000" hieght="1000" style="display:block; border:1px solid #aaa; margin:0 auto;"></canvas>

2.开始在js中使用canvas。canvas本身只是标签，是图形容器。具体绘制图形需要用脚本，也就是js。canvas的上下文对象有很多的接口，这些接口是实现那些很炫的效果的基础。首先，得到上下文对象。

<canvas id="canvas" width="800" height="800"></canvas>

var canvas=document.getElementById('canvas');

var context=canvas.conText('2d');

下面都是用context来绘制图形。

3.首先说一点重要的，canvas是基于状态来绘制图形的，也就是说先设置状态，再用绘制函数。这点必须牢记。不然容易代码顺序乱掉。

一些基本绘制方法。

1）绘制线条：

context.moveTo(100,100);（将起点移到（100,100），这里的点的原点是以canvas这块画布的左上角的点作为原点，以此点为参照）。

context.lineTo(300,300);（从上一点移到（300,300），这样就得到了一条线段）。）

context.strokeStyle="red";(设置线条样式，这里为添加颜色)

context.lineWidth=3;（线条宽度）

context.stroke();（开始绘制）

再比如这样的话：

2）填充线条：

context.moveTo(100,100);
context.lineTo(200,100);
context.lineTo(150,200);

context.fillStyle="red";

context.fill();

这可以得到折线吧,本来线不是闭合的，但经过填充，自动变为闭合的图形了，这也是填充的特点。

3）简单吧。再来一个例子。

context.moveTo(100,100);
context.lineTo(200,100);
context.lineTo(150,200);

context.strokeStyle="red";

context.stroke();

context.moveTo(200,100);
context.lineTo(300,100);
context.lineTo(200,200);

context.StrokeStyle="green";

context.stroke();

想象一下效果，发现是不是不太一样啊，是的。你会发现线条颜色都是绿色的。这是因为两次设置，后一次覆盖了前一次。

那怎么消除这个影响呢？很简单，加入context.beginPath()和context.closePath();

如下：

            context.beginPath();

            context.moveTo(100,100);
            context.lineTo(200,100);
            context.lineTo(150,200);
            context.closePath();
            context.strokeStyle="red";
            context.stroke();


            context.beginPath();
            context.moveTo(200,100);
            context.lineTo(300,100);
            context.lineTo(200,200);
            context.closePath();
            context.strokeStyle="green";
            context.stroke();