canvas路径画线条

时间：5年前阅读：6006

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background:blue;    
			}    
		</style>    
	</head>    
	<body>    
		<canvas id="canvas" width="900" height="500"></canvas>    
		<script type="text/javascript">    
//			获得画板  通过ID捉到它    
			var canvas = document.getElementById("canvas");    
//			获得绘画环境    '2d'平面的绘画环境画布    
			var cv = canvas.getContext('2d');    
//			开启路径(相当于大喊一声,我要开始画啦)    
			cv.beginPath();    
//			移动笔触到开始位置    
//			距离左边100,上边100    
			cv.moveTo(100,100);    
//			指定要画到哪里去  距离左边600,上边300    
			cv.lineTo(600,300);    
//			定义拐角(尖角)类型		
    
			cv.lineJoin ='round';    
//			定义线条颜色    
			cv.strokeStyle = 'white';    
//			定义线条粗细    
			cv.lineWidth = 10;    
//			把线条画出来,默认是黑色颜色，所以上面加上一个定义线条颜色,再定义线条粗细    
			cv.stroke();    
//			再画    
			cv.lineTo(700,150);    
			cv.stroke();    
//			再画    
			cv.lineTo(780,400);    
			cv.stroke();    
		</script>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

canvas路径 画线条

网友评论

canvas路径画线条