Html5之canvas笑脸、getContext、beginPath、moveTo、arc、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="121" height="119"> // 获取画布 let canvas = document.getElementById('idCanvas'); // 用于验证浏览器是否支持canvas， // 它是h5的新特性，老版本ie不支持 if (!idCanvas.getContext) return alert('浏览器不支持！'); // 画笔，可选2d和3d let ctx = canvas.getContext("2d"); ctx.beginPath(); // 前两个圆心，后面半径，0代表从多少度开始画， // Math.PI*2表示完整的弧长，true代表逆时针 ctx.arc(60, 60, 50, 0, Math.PI * 2, true); ctx.moveTo(95, 60); // ------------------------------------- // 顺时针画半圆（口） ctx.arc(60, 60, 35, 0, Math.PI, false); // ------------------------------------- ctx.moveTo(45, 40); // 左眼小圆 ctx.arc(40, 40, 5, 0, Math.PI * 2, true); // ------------------------------------- ctx.moveTo(85, 40); // 右眼小圆 ctx.arc(80, 40, 5, 0, Math.PI * 2, true); // ------------------------------------- ctx.stroke(); } smilingFace(); 

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

4.2、普通二维码

5、相关链接

CSDN-前端装逼必备–Canvas