Html5之canvas三角形、getContext、beginPath、moveTo、lineTo、fill、closePath、stroke

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="230" height="110"> // 获取画布 let canvas = document.getElementById('idCanvas'); // 用于验证浏览器是否支持canvas， // 它是h5的新特性，老版本ie不支持 if (!idCanvas.getContext) return alert('浏览器不支持！'); // 画笔，可选2d和3d let ctx = canvas.getContext("2d"); // 新建一个路径，绘制指定到这个路径上 ctx.beginPath(); // 路径从哪开始 ctx.moveTo(10, 10); // 到哪个点 ctx.lineTo(100, 100); ctx.lineTo(10, 100); // 填充内容区域，生成实心图 ctx.fill(); // 画描边三角形 ctx.beginPath(); ctx.moveTo(220, 10); ctx.lineTo(120, 100); ctx.lineTo(220, 100); // 路径闭合方法 ctx.closePath(); ctx.stroke(); } triangle(); 

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

4.2、普通二维码

5、相关链接

CSDN-前端装逼必备–Canvas