canvas学习笔记一

html5新增的canvas标签可用来绘图。今天开始学习了一点绘制基础。

一、绘制三角形

1）canvas绘图是基于状态的绘图，也就是说应该先设置绘图状态，再调用函数进行绘制
2）坐标系：canvas的左上角为原点，向右为x轴正方向，向下为y轴正方向 

绘图步骤：

1）定义标签

<canvas id='canvas1'>
	  当前浏览器不支持canvas，换个浏览器试试   //向下降级，如果浏览器支持，会忽略标签里的文字
</canvas>

2）在js中初始化

  //初始化
	  var canvas=document.getElementById('canvas1');
	  canvas.width=1024;
	  canvas.height=500;
	  //获取绘图上下文环境，是进行绘制所需的接口
	  var context=canvas.getContext('2d');

我们之后的操作都是基于context对象

3）设置绘图状态

   context.moveTo(50,50);
   context.lineTo(50,500);
   context.lineTo(500,50);
   context.lineTo(50,50