canvas画布实现矩形的绘制

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

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

代码实现:

绘制一个实心矩形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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

CSS布局(六) 对齐方式

一、水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将...

3665
来自专栏Modeng的专栏

canvas学习总结六:绘制矩形

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!! https://blog.csdn.net/qq_32135281...

951
来自专栏小狼的世界

利用setTimeout和SetInterval构建Javascript计时器

看到了一篇深入浅出的讲解setTimeout和setInterval的例子,直接讲英文贴出来吧,也不是很难。

1443
来自专栏十月梦想

canvas之画板简单功能实现

具体的内容都包含注释内容了,包含了线条颜色可以获取input内的颜色value值,线条粗细使用range的value控制

1043
来自专栏我分享我快乐

HTML5常用的标签

目录: HTML5新结构标签 HTML5新其他标签 HTML5新input类型 HTML5新属性 HTML5高级应用 html4和html5对比: Html4代...

3268
来自专栏Golang语言社区

【Go 语言社区】 H5 APP 前端开发专业的 HTML 5 Canvas

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。 canva...

2926
来自专栏.Net移动开发

VS2017移动开发(C#、VB.NET)——Numeric控件的使用方式

若将该属性设置为“0”,该控件的背景色即为全透明的,显示为Smobiler窗体设计界面的背景色。

1771
来自专栏小壮和前端

键盘事件 和键码

1571
来自专栏天天

Canvas

1953
来自专栏deepcc

一个特别不错的jQuery快捷键插件:js-hotkeys

4556

扫码关注云+社区

领取腾讯云代金券