canvas画布实现矩形的绘制

十月梦想

发布于 2018-08-29 03:03:20

2.6K00

代码可运行

文章被收录于专栏：十月梦想十月梦想

运行总次数：0

代码可运行

简单实现两种矩形的绘制:

第一种矩形背景填充简单说就是背景填充的实心矩形

代码实现:

绘制一个实心矩形cv.fillRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用fillStyle

<canvas id="canvas" width="500" height="400">
		<script type="text/javascript">
			window.onload=function(){
				//(获得滑板)抓取元素
			var c=document.getElementById('canvas');
			//获取绘画环境
			var cv=c.getContext('2d');
			//指定填充颜色
			 cv.fillStyle='red';
			 //绘制一个矩形cv.fillRect(x,y,width,height)
			 cv.fillRect(100,100,200,200);
			}
			
		</script>
	</canvas>

第二种矩形有线条构成,矩形内部没有填充可以设置矩形线条的颜色,线条宽度也叫空心矩形

代码实现:

绘制一个空心矩形cv.strokeRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用strokeStyle,线条宽度使用lineWidth=10;表示线条宽度10像素!

<canvas id="canvas" width="500" height="400">
<script type="text/javascript">
window.onload=function(){
//(获得滑板)抓取元素
var c=document.getElementById('canvas');
//获取绘画环境
var cv=c.getContext('2d');
//指定填充颜色
//线条宽度lineWidth='';
cv.lineWidth=5;
//线条填充颜色strokeStyle='颜色'
cv.strokeStyle='#26faaf';
//空心矩形strokerect(x,y,width,height)
cv.strokeRect(50,80,220,220);
}
</script>
</canvas>

注意:填充使用fillRect,绘制空心使用strokeRect,样式等属性使用在构造矩形之前进行使用,填充相关使用fill,空心相关的使用stroke

get一下:

在矩形内进行清除已经绘制矩形的某个区域可以使用清除实现clearRect(left,top,width,height);

矩形内部清除代码实现:

<canvas id="canvas" width="500" height="400">
		<script type="text/javascript">
			window.onload=function(){
				//(获得滑板)抓取元素
			var c=document.getElementById('canvas');
			//获取绘画环境
			var cv=c.getContext('2d');
			//指定填充颜色
			cv.fillStyle='red';
			//绘制一个矩形cv.fillRect(x,y,width,height)
			cv.fillRect(100,100,200,200);
			//线条宽度lineWidth='';
			// 	cv.lineWidth=5;
			// 	//线条填充颜色strokeStyle='颜色'
			// 	cv.strokeStyle='#26faaf';
			// //空心矩形strokerect(x,y,width,height)
			// cv.strokeRect(50,80,220,220);
			//清除绘图部分clearRect(x,y,width,height),清空矩形内的像素(背景填充)
				cv.clearRect(50,80,180,80);
			}
			
		</script>
	</canvas>