canvas的基本用法 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas画布</title>
	<style>
		canvas{
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<canvas width="800" height="600" id="cav"></canvas> 
	<script>
		var cavs = document.getElementById('cav');
		var txt = cavs.getContext('2d');//
		txt.moveTo(100,100);//开始的位置
		txt.lineTo(300,100);//结束位置
		txt.strokeStyle = 'yellowgreen';//设置线条的颜色
		// txt.lineWidth = 10;//设置线的宽度
		// txt.stroke();//画笔//解决画了两次问题，方法一只需要保留最后的一个txt.stroke();即可

// 方法二：txt.beginPath();//解决问题重置
// 再画一条线
		txt.moveTo(400,200);
		txt.lineTo(400,500);
		txt.stroke();
	</script>
</body>
</html>

　　

posted on 2018-10-10 15:08  婧星  阅读(218)  评论(0)    收藏  举报

导航