HTML

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" />

viewport 是用户网页的可视区域。

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例
viewport-fit=cover"

canvas

学习 HTML5 Canvas 这一篇文章就够了

H5 中 <canvas> 元素用于图形的绘制，<canvas> 标签只是图形容器，必须使用脚本 (通常是JavaScript) 来绘制图形。

canvas 可以绘制路径、图形、字符、添加图像等，也可以实现截图功能。

// 常用 API
const canvas = document.getElementById('#canvas');
const ctx = canvas.getContext("2d");
ctx.moveTo(0,0); // 画线起点
ctx.lineTo(200,100); // 画线终点
ctx.fillText("Hello World",10,50); // 写字
ctx.arc(95,50,40,0,2*Math.PI); // 画圆
ctx.fillRect(10,10,150,80); // 画长方形
ctx.drawImage(img,10,10); // 画图片
canvas.toDataURL(); // 导出图像

html语义化

理解HTML语义化