HTML5之canvas标签（上）

现在HTML5备受关注，其中它新增的一些标签感觉战斗力爆棚哈。本章就主要介绍下HTML5的canvas标签，希望能给初学者有所帮助。大家共同学习。

canvas元素就是画布，就是通过该元素结合javascrtpt可以在网页上绘制各种图形，甚至制作各种酷炫动画，以及一些小游戏。下面我就从canvas最基础的地方，来讲解有关canvas的各种属性，好了，下面开启打怪升级的道路。

首先我们先定义一个画布<canvas id="canvas"></canvas>下面的各种操作就都是在这个画布上进行。
1. 绘制直线
var canvas=document.getElementById(“canvas”);//获取canvas标签
var context=canvas.getContext(“2d”);//以2D形式
context.width=1024;//画布宽
context.height=768;//画布高
context.moveTo(20,20);//线段起始位置(x,y)
context.lineTo(100,100);//线段结束位置
context.stroke();//进行绘制

ps:上面的绘制没有加颜色属性，默认的是黑色。context.moveTo(20,20); context.lineTo(100,100);这两句代码的作用只是起到定义绘制的状态，而真正让线段出现在画布上的是context.stroke();所以就是说如果不加这句，则画布上不会显示任何线段。

2.绘制三角形
context.fillStyle=”red”
context.moveTo(10,10);
context.lineTo(150,50);
context.lineTo(10,50);
context.lineTo(10,10);
context.fill();
context.stroke();

3 .绘制矩形
context.fillStyle=”#FF0000”;//定义矩形填充色
context.fillRect(0,0,150,75);//绘制矩形
4.绘制圆形
context.fillStyle=”#FF0000”;//定义圆形填充色
context.beginPath();//开始绘制路径
context.arc(30,30,10,0,2*Math.PI,true);//画圆
context.closePath();//关闭路径
context.fill();//填充颜色

首先context.beginPath();和context.closePath();是成对出现的，如果绘制多个图形，使用它们，可以防止重绘，就是在原有基础上又画了一次，造成重叠。另外context.arc(30,30,10,0,2*Math.PI,true);里面的属性分别代表圆的横坐标，纵坐标，半径，画圆的起始点，画圆的终止点，true代表逆时针绘制，false代表顺时针绘制，默认的是false.
再说下画圆的起始终止点

从这张图便可看出上面代码绘制起始处，知道这一点，我们可以更改上面的上面的数字，便会得到不同的效果。

---

今天canvas标签就先到这，今天介绍的这些知识都是canvas最基本的一些东西，还有一些颜色渐变，插入图片等下次再说，下一次，可以运用今天的知识做一个七巧板。至于我的七巧板是怎样的，我们下次再说。