本篇文章为大家展示了使用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画无填充矩形的效果如下：
上述内容就是使用canvas绘制矩形有哪些方法，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
