Html5之canvas重叠矩形getContextfillStylefillRect

Posted 2022-02-13 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html5之canvas重叠矩形getContextfillStylefillRect相关的知识，希望对你有一定的参考价值。

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();