Html5之canvas重叠矩形、getContext、fillStyle、fillRect

---

1、Css部分

.canvas_box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.canvas {
	border: 1px solid #777;
}

---

2、Html部分

<div class="canvas_box">
	<canvas class="canvas" id="idCanvas" width="100" height="100">canvas>
div>

---

3、JavaScript部分

function overlappingRectangle() {
	// 获取画布
	let idCanvas = document.getElementById('idCanvas');

	// 用于验证浏览器是否支持canvas，
	// 它是h5的新特性，老版本ie不支持
	if (!idCanvas.getContext) return alert('浏览器不支持！');

	// 画笔，可选2d和3d
	let ctx = idCanvas.getContext("2d");

	// 填充颜色
	ctx.fillStyle = "rgba(200, 0, 0, 1)";
	// 画矩形的方法，四个参数含义，
	// 前两个表示x，y坐标（相对于canvas的位置，并不是相对于窗口），
	// 从哪里开始画，后面表示长宽。
	ctx.fillRect(10, 10, 50, 50);

	// 填充颜色
	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	// 设置矩形位置及大小
	ctx.fillRect(40, 40, 50, 50);
}
overlappingRectangle();

---

4、效果演示

4.1、微信小程序码

---

4.2、普通二维码

---

5、相关链接

CSDN-前端装逼必备–Canvas