使用canvas绘制几何图形

几何图形分两种，一种是由线段构成的，一种是由弧线构成的，下面将利用canvas绘制一个矩形和圆形。

canvas

canvas是HTML5引入的一个定义图形的标签，相当于一个容器，所以图形的绘制还必须用脚本来完成。

绘制矩形

html

<canvas id="canvas">你的浏览器居然不支持Canvas？</canvas>

js

var canvas = document.getElementById("canvas");
//设置画布的尺寸，默认宽高为300
canvas.width = 1200;
canvas.height = 1200;
canvas.style.border = "1px solid #ddd";
//开始绘制
var context=canvas.getContext("2d");

//方法一 使用连线的方式
context.beginPath();
context.moveTo(50,50);//开始绘制点坐标
context.lineTo(250,50);//第二个连接点坐标
context.lineTo(250,250);//第三个连接点坐标
context.lineTo(50,250);////第四个连接点坐标
context.lineTo(50,50);//闭合
context.closePath(); //使用closePath闭合图形，(设置了lineWidth导致左上角有一个缺口)
context.lineWidth = 10;//线条宽度
context.strokeStyle = "red";//线条颜色
context.stroke();//确认线条颜色
context.fillStyle = "blue";//填充背景色
context.fill();//确认填充背景色

//方法二  fillRect()方法绘制矩形
context.beginPath();
context.strokeStyle = "red";//线条颜色
context.lineWidth = 10;//线条颜色
context.fillStyle = "blue";//填充背景色
context.fillRect(100,100,200,200);//四个参数，位置x y 矩形的宽 高
context.strokeRect(100,100,200,200);

绘制圆形

使用canvas圆弧api：context.arc(x,y,r,sAngle,eAngle,counterclockwise)来完成;

参数描述：

x 是圆的中心的 x 坐标。

y 是圆的中心的 y 坐标。

r 是圆的半径。

sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle 结束角，以弧度计。

counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

js

var canvas = document.getElementById("canvas");
//设置画布的尺寸，默认宽高为300
canvas.width = 1200;
canvas.height = 1200;
canvas.style.border = "1px solid #ddd";
//开始绘制
var context=canvas.getContext("2d");
context.beginPath();
context.fillStyle = "green";//填充背景色
context.arc(50,50,50,0,2*Math.PI);//Math.PI----π
context.fill();
context.stroke();