初识canvas

MDN参考

<canvas id="cvs" width="300" height="300"></canvas>

<script>
	//获取canvas对象
	var cvs = document.getElementById('cvs');
	//获取画笔
	//（参数2d，表示建立一个二维渲染上下文，从页面的左上角开始，向右为X轴，为正，向下为Y轴，为正）
	var ctx = cvs.getContext('2d');

	//画一条线段
	//设置笔触样式
			ctx.lineWidth = 5;
			ctx.strokeStyle = 'red';
	
	//指定一个起始点
	ctx.moveTo(100,100);
	//指定另外一个点
	ctx.lineTo(400,100);
	//闭合路径
	ctx.closePath();   //若只是画一条线段，可以不写该方法
	//执行线段的绘画操作,绘制已经定义的路线
	ctx.stroke();

            //画一个三角形
			//指定三个点
			ctx.moveTo(100,150);
			ctx.lineTo(350,200);
			ctx.lineTo(200,300);
			//闭合路径
			ctx.closePath();   //如果是一个闭合图形，必须要有该方法
			ctx.stroke();

</script>