Html5之canvas清除特定矩形getContextfillStylefillRectclearRectstrokeRect

Posted 2022-02-13 web半晨

tags:

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

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 clearSpecificRectangle() 
	// 获取画布
	let idCanvas = document.getElementById('idCanvas');

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

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

	// 填充颜色
	ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
	// 绘制一个矩形，清除特定矩形，绘制边框
	ctx.fillRect(10, 10, 80, 80);
	// 清除特定矩形
	ctx.clearRect(20, 20, 60, 60);
	// 绘制矩形边框
	ctx.strokeRect(25, 25, 50, 50);

clearSpecificRectangle();