语雀

• html绘制一块画布

<!--首先创建一个canvas，布置一张画布-->
<canvas id="canvas" width="" height="">
	如果你看不到我，那么你是时候升级你的浏览器了、。
</canvas>

• JavaScript画一条线条

<script>
		//当页面加载完成的时候获取一张画布，获取一支画笔
		window.onload=function(){
			
			var canvas=document.getElementById('canvas');//获取一张画布
			var context=canvas.getContext('2d');//获取一支2d画笔
			
			//觉醒吧，艺术家之魂
			//先来画一条线条
			//浏览器画线条时是将画笔    moveTo 移动到起点的位置， lineTo再确定末点位置，最后才绘制线条
			//Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。
			
			context.moveTo(100,100);//将画笔移到（100,100）开始点
			context.lineTo(1000,100);//规划好末点的位置(1000,100)
			
			//但是现在还开始画的。我们先来确定一下选什么颜色的画笔，多小多大笔触的画笔 
			context.lineWidth=5;//笔触为5
			context.strokeStyle="red";//画笔线条颜色为red
			
			
			//确定绘制，确定绘制只有两种方法,stroke()和fill();因为这里画的是线条，所以只需要stroke就可以了
			context.stroke();
		
		}
		
	</script>