Html5之canvas清除特定矩形、getContext、fillStyle、fillRect、clearRect、strokeRect

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"> // 获取画布 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(); 

4、效果演示 4.1、微信小程序码

4.2、普通二维码

5、相关链接

CSDN-前端装逼必备–Canvas