canvas基础与乾坤

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) }; }

乾坤基础