canvas绘制图形入门

canvas说明

canvas 标签只是图形容器，您必须使用脚本来绘制图形。canvas本身不提供任何图形。

canvas支持浏览器

浏览器类型	支持版本
ie	ie9+
Firefox	1.5
Chrome	*
Opera	9+
低版本IE	引入Explorer Canvas

定义画布canvas

<canvas width="600" height="400" id="mycanvas"></canvas>

绘制一个正方形

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

此时画布会呈现如下效果：

此时，一个简单的图形绘制成功。

绘制一个圆形

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150,150,100,0,180/Math.PI,true);//以圆心300,300，绘制一个半径为100的原型 true或者false表示正向画圆还是逆向画圆，在绘制扇形的时候有意义
ctx.stroke();//画边框，关闭
ctx.fill();

绘制结果图形如下：

绘制一条线

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();//开始绘制路径
ctx.moveTo(100,100);//移动到某点
ctx.lineTo(300,300);//绘线
//上线两行是虚拟线，并没有实际画上
ctx.strokeStyle='aquamarine';//改变线的颜色
ctx.stroke();//需要执行此方法才会真正划线

绘制图形如下：

绘制一个三角形

var canvas = document.getElementById('mycanvas');
			var ctx = canvas.getContext('2d');
			ctx.beginPath();//开始绘制路径
			ctx.moveTo(100,100);//移动到某点
			ctx.lineTo(300,300);//绘线
			ctx.lineTo(300,100);//绘线
			ctx.closePath();//封闭路径
			//上线两行是虚拟线，并没有实际画上
			ctx.strokeStyle='aquamarine';//改变线的颜色
			ctx.stroke();//划线
			ctx.fillStyle='rosybrown';//内部填充颜色
			ctx.fill();//开始填充

绘制图形如下：

下期会写一版自己绘制拓扑图的简单说明