canvas绘制矩形

时间：6年前阅读：4809

HTML5的canvas绘制矩形

直接上代码演式：

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			canvas{    
				background: dodgerblue;    
			}    
		</style>    
	</head>    
	<body>    
		<!--canvas相当于一块画板-->    
		<canvas id="nntt" width="800" height="500"></canvas>    
		<script type="text/javascript">    
//			获得画板    通过ID捉到它    
			var nntt = document.getElementById("nntt");    
//			获得绘画环境    
//			'2d'平面的绘画环境画布    
			var cv = nntt.getContext('2d');    
//			指定颜色放前面    
//	cv.fillStyle = '#DB7093';		
    
//			绘制一个填充矩形    
//			这里有的是cv 图片里的是context.fillRect 前面这个可以自已命名的    
//绘制开始从左边200,上面100开始.宽度260,高度199 但绘制出来是没有指定颜色默认的黑色。    
//			cv.fillRect(200,100,260,199);    
//绘制指定颜色 context.fillStyle= 'red'	
    
//指定填充颜色       绘制颜色要放在前面，否则不显示颜色的    
//cv.fillStyle = '#DB7093';    
//指定线条粗细	
    
	cv.lineWidth=10;    
//	绘制指定线条颜色    
cv.strokeStyle = '#DB7093';	
    
//	绘制矩形空心的(无填充)    
cv.strokeRect(200,100,260,199);    
		</script>    
	</body>    
</html>

上面代码效果图片：

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

微信扫码关注

更新实时通知

canvas绘制矩形

网友评论