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