如何在HTML5的canvas元素上绘制简单图案

canvas：

canvas是HTML5中的元素，其使用JavaScript在网页上绘制图像。它拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。

创建画布的方法：

创建canvas画布首先要在HTML5页面中添加canvas元素：

<canvas id="canvas"  width = "500" height= "500">
	您的浏览器不支持canvas  //当某些浏览器不支持canvas时显示改文字
</canvas>

这样就创建了一个宽为500像素，高为500像素的画布。但是canvas元素本身是没有绘图的能力的，因此就需要借助javascript来完成绘图。

var canvas = document.getElementById("canvas");//找到画布对象
var ctx = canvas.getContext("2d");//创建绘画所需要的笔

这样，我们在canvas上绘制图案时的准备工作就完成了。
接下来我们通过画笔所拥有的不同的方法来绘制不同的图案。

线段的绘制

一条线段是有起点和终点的。在canvas里面绘制线段也是同样需要给定起点和终点。

ctx.moveTo(10,10);//moveTo:线段起点，里面的参数分别为起点坐标的横坐标和纵坐标。
ctx.lineTo(100,10);//lineTo:线段终点，里面的参数分别为起点坐标的横坐标和纵坐标。
ctx.lineTo(100,20);//当我们再次使用该方法时，线段起点默认在之前线段的终点。新的坐标位置为新的终点。
ctx.stroke();//退出路径绘制，如果没有该方法，线段将会闭合

圆的的绘制

在canvas中我们也可以绘制圆形：

ctx.beginPath();//开始一条路径
ctx.arc(100,100,20,0,2*Math.PI);/前两个参数为坐标，第三个参数为半径，后两个参数分别是开始角和结束角，每0.5Math*PI为90度
ctx.stroke();//结束路径

文本的绘制

通过canvas我们也可以自定义各种样式的文字

ctx.font="30px";//字体样式
ctx.fillText("Hello World",10,50);//参数（内容， 开始绘制的横坐标，开始绘制的纵坐标）