目录
1、Css部分2、Html部分3、JavaScript部分4、效果演示4.1、微信小程序码4.2、普通二维码5、相关链接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和3dlet 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
