Canvas绘制基础图形

Canvas

   作为HTML5中新增的特性，即为一块画布，其本身是不具备绘图能力的，主要调用javascript来实现各种图形的绘制，下面主要介绍下绘制基础的线条、多边形和圆、圆弧

首先我们需要制作一块画布，在HTML 5的标准中是这样来定义这块画布的：
<canvas id="canvas" width="1024" height="500"></canvas>
这里定义了这块画布的宽、高和id

前面已经说过canvas本身不具备画图功能，需要通过javascript来实现下面从绘制一条直线开始吧

<script type="text/javascript">
     var canvas=document.getElementById("canvas");
     var context=canvas.getContext("2d") //定义2d绘制（这里可以理解为使用context来绘制）
     //状态设置（定义如何绘制）
     context.moveTo(10,10);       //起点
     context.lineTo(100,100);     
     //绘制（调用的绘制函数）
     context.stroke();
</script>

下面可以给上面的绘制的直线延伸两个属性：

context.lineWidth=5;          //设置绘制线条的宽度
context.strokeStyle="blue";   //设置线条样式（主要是颜色）

直线已经绘制好啦，那么下面可以在这个基础上进一步绘制多边形了，可能我们会联系到那么久多定义几个context.lineTo，并且最后的一个content.lineTo位置和起点一样不就好啦，这当然是一个很对的思路，代码如下：

<script type="text/javascript">
     var canvas=document.getElementById("canvas");
     var context=canvas.getContext("2d") 
     context.moveTo(10,10);       //起点
     context.lineTo(100,100);  
     context.lineTo(10,100);
     context.lineTo(10,10);      //终点与起点颜色一致

     context.lineWidth=5;          //设置绘制线条的宽度
     context.strokeStyle="blue";   //设置绘制线条的颜色
     context.stroke();
</script>

那么，假如我们想同时在一个画布里面去绘制两种不同线条的多边形这样可以是不是也这样了（明天分解）