Canvas 绘制矩形
矩形绘制
- rect(x,y,w,h) 没有独立路径
- strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
- fillRect(x,y,w,h) 有独立路径，不影响别的绘制
- clearRect(x,y,w,h) 擦除矩形区域
rect(x,y,w,h) 没有独立路径
参数图例说明：
下面来代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
//绘制矩形
x0 = 100; // 矩形起点的x
y0 = 100; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.rect(x0,y0,w,h); // 绘制矩形
ctx.fillStyle = 'lightblue'; // 填充颜色
ctx.fill();
ctx.strokeStyle = 'gold'; // 描边
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
可以从浏览器可以看到，已经绘制出了一个矩形，但是注意，这个方法是没有独立路径的。
什么是独立路径？
就是绘画的形状不会被其他形状覆盖。下面可以绘制多一个矩形，看看会不会覆盖，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
//绘制矩形
x0 = 100; // 矩形起点的x
y0 = 100; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.beginPath();
ctx.rect(x0,y0,w,h); // 绘制矩形
ctx.fillStyle = 'lightblue'; // 填充颜色
ctx.fill();
ctx.strokeStyle = 'gold'; // 描边
ctx.stroke();
// 绘制第二个矩形，确认是否可以覆盖第一个矩形
x1 = 150; // 矩形起点的x
y1 = 150; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.beginPath();
ctx.rect(x1,y1,w,h); // 绘制矩形
ctx.fillStyle = 'red'; // 填充颜色
ctx.fill();
ctx.strokeStyle = '#000'; // 描边
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
相对于上面没有独立路径的绘制方法，strokeRect(x,y,w,h) 是有独立路径的，每个绘制都是自动带有beginpath()的属性，也就是样式是独立的。
下面来绘制两个描边矩形，看看会不会被覆盖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
//绘制矩形
x0 = 100; // 矩形起点的x
y0 = 100; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.strokeRect(x0,y0,w,h); // 绘制矩形
ctx.strokeStyle = 'gold';
// 绘制第二个矩形，确认是否可以覆盖第一个矩形
x1 = 150; // 矩形起点的x
y1 = 150; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.strokeRect(x1,y1,w,h); // 绘制矩形
ctx.strokeStyle = '#000';
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
fillRect(x,y,w,h) 有独立路径，不影响别的绘制
上面是绘制描边的矩形，fillRect() 是用来绘制填充的矩形的，并且也有独立路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
//绘制矩形
x0 = 100; // 矩形起点的x
y0 = 100; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.fillRect(x0,y0,w,h); // 绘制矩形
ctx.fillStyle = 'gold';
// 绘制第二个矩形，确认是否可以覆盖第一个矩形
x1 = 150; // 矩形起点的x
y1 = 150; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.fillRect(x1,y1,w,h); // 绘制矩形
ctx.fillStyle = '#000';
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
clearRect(x,y,w,h) 擦除矩形区域
clearRect(x,y,w,h) 是像橡皮擦那样，将矩形的一部分擦拭掉，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
border: 1px solid #cccccc;
margin-top: 100px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var ctx = myCanvas.getContext('2d');
//绘制矩形
x0 = 100; // 矩形起点的x
y0 = 100; // 矩形起点的y
w = 200; // 矩形宽度
h = 100; // 矩形高度
ctx.fillRect(x0,y0,w,h); // 绘制矩形
ctx.fillStyle = 'gold';
// 擦拭一部分矩形
x3 = 150;
y3 = 150;
w = 25;
h = 25;
ctx.clearRect(x3,y3,w,h);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>浏览器显示如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
