如何用canvas绘制矩形？canvas画矩形的两种方法介绍

来源:网络整理作者: 发布时间:2020-12-21 14:36

canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩...

canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以，如何用canvas绘制一个矩形呢？接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容，若是有需要的话可以看看。

我们需要知道的是在canvas中与矩形相关的方法是rect()，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

rect()方法能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。

首先，我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用canvas画矩形</title> <style> </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象 context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式 context.fillRect(50,50,400,300); // x轴 y轴宽和高 ,绘制“被填充”的矩形 } draw("canvas"); </script> </body> </html>

canvas画有填充矩形的效果如下：

然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用canvas画矩形</title> <style> </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script type="text/javascript"> function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象 context.strokeStyle = "pink"; //图形边框的填充颜色 context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形： context.strokeRect(50,50,180,120); //绘制矩形（无填充） context.strokeRect(110,110,180,120); } draw("canvas"); </script> </body> </html>

canvas画无填充矩形的效果如下：

2345截图20180917101052.png

最后本篇文章到这里就结束了，关于canvas更多的相关知识可以参考HTML5开发手册。

以上就是如何用canvas绘制矩形？canvas画矩形的两种方法介绍的详细内容，更多请关注php中文网其它相关文章！

相关热词：方法

本站内容来源于网络，如有侵权请与我们联系，我们会及时删除，我们深感抱歉！
注：本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规！

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/6676.shtml

上一篇：canvas如何绘制时钟？canv

下一篇：如何在文字下面添加下划

HTML5 学习总结（四）canvas绘图	canvas与html5实现视频截图成果
html5 canvas常用api总结(二)画图	Canvas跨域的解决方案介绍
canvas实现图片涂鸦功能（附代	用canvas实现简单的下雪效果（
HTML5 canvas中如何绘制图像	如何使用HTML5 canvas实现图像的
在canvas上实现元素图片镜像翻	html5利用canvas绘画二级树形结构
canvas绘制各种基本图形	利用Canvas模仿百度贴吧客户端
html5使用html2canvas实现浏览器截	HTML5 canvas绘制五角星的方法
html5使用canvas实现跟随光标跳动	使用canvas画“哆啦A梦”时钟的