canvas基础
ctx= cvs.getcontext(2d)
cvd.height cvx.width
直线
ctx.beginPath()
ctx.moveTo（坐标）
ctx.lineTo
ctx.lineTo
ctx.lineTo
ctx.strok 描边
ctx.closePath 闭合
曲线
ctx.arc(100,500,6,Math.pi,true)
ctx.fill 填充
原始尺寸 = 放大尺幅 * 缩放倍率 模糊问题 devicepixeratio
文字
ctx.fillText
ctx.fillStyle
图片
ctx.drawImage(img, 400, 50, 200, 150);转换坐标 获取文本边界 判断是不是在里面 命中
const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 坐标转换函数 function getCanvasPos(canvas, e) { const rect = canvas.getBoundingClientRect(); // 获取Canvas的位置/尺寸 return { x: (e.clientX - rect.left) * (canvas.width / rect.width), // 修正缩放 y: (e.clientY - rect.top) * (canvas.height / rect.height) }; }乾坤基础
