在 HTML5 的<canvas>元素上绘制标尺网格，你可以按照以下步骤进行：
- 准备画布（Canvas）：
首先，在 HTML 文档中创建一个<canvas>元素，并为其设置 ID 或类名以便后续通过 JavaScript 引用。你还可以通过 CSS 来设置画布的大小和样式（尽管最好直接在 JavaScript 中设置以避免缩放问题）。 - 获取 Canvas 上下文：
使用document.getElementById()（或其他 DOM 选择方法）获取<canvas>元素，并调用其getContext('2d')方法来获取一个 2D 渲染上下文，该上下文提供了用于在画布上绘图的方法和属性。 - 设置画布尺寸：
在绘制之前，使用canvas.width和canvas.height属性来设置画布的宽度和高度。这确保了画布具有正确的尺寸，并且所有的绘制都会在这个尺寸内进行。 - 定义网格参数：
确定网格的单元尺寸（例如，每个小格子 10 像素宽和高）、大格子的数量或尺寸（可能每个大格子包含多个小格子）、以及是否需要在网格上添加刻度或文本标记。 - 绘制网格线：
使用beginPath()、moveTo()、lineTo()和stroke()方法来绘制水平和垂直的网格线。你可以通过循环遍历画布的宽度和高度，并在每个网格单元的开始和结束位置绘制线条来实现这一点。 - 添加刻度或文本：
如果需要，在网格的特定位置（如每个大格子的开始或结束处）绘制刻度线或文本标记。这通常涉及到在网格线上方或旁边使用fillText()方法绘制文本，或使用更细的线条绘制刻度。 - 优化性能：
如果网格是静态的，那么只需绘制一次即可。如果网格需要响应某些事件（如缩放、平移或数据更新），则可能需要考虑使用离屏canvas、图层或其他技术来优化重绘过程。
下面是一个简单的示例代码，展示了如何在<canvas>上绘制一个基本的标尺网格。
先上效果图：
需求：
- 绘制网格都是 1px，会出现 1px 虚像。需要向左或者向右便宜 0.5 像素，
- 画布为了保持清晰度，需要设置真实分辨率。
- 0 标尺需要单独设置。
- 两次 for 循环防止字符绘制出现在线段之前。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas</title>
</head>
<style>
#canvas{
border: 1px solid black;
}
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
const dpr = window.devicePixelRatio;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = 700, h = 500;
var trueW = Math.round(w * dpr);
var trueH = Math.round(h * dpr);
// 设置画布真实分辨率（宽高）
canvas.width = Math.round(w * dpr);
canvas.height = Math.round(h * dpr);
// 设置浏览器画布宽高
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var gap = 50;
drawGrid(ctx, gap, '#eeeeee', trueW, trueH);
function drawGrid(context, gapNum, color, w, h) {
const wl = Math.round(trueW / gapNum)
context.lineWidth = 1;
context.strokeStyle = color;
context.font = '12px Arial';
context.fillStyle = 'gray';
const start = fixLineFuzzy(0)
for(var i = 0; i < wl; i++){
const insMum = gapNum * i
const gap = fixLineFuzzy(insMum);
context.moveTo(gap, start);
context.lineTo(gap, h);
context.stroke();
context.moveTo(start, gap);
context.lineTo(w, gap);
context.stroke();
}
for(var i = 0; i < wl; i++){
const insMum = gapNum * i
const gap = fixLineFuzzy(insMum);
if (insMum == 0) {
context.textAlign = 'left';
context.textBaseline = 'top';
context.fillText(insMum, gap, start);
} else {
context.textAlign = 'center';
context.textBaseline = 'top';
context.fillText(insMum, gap, start);
context.textAlign = 'left';
context.textBaseline = 'middle';
context.fillText(insMum, start, gap);
}
}
}
function fixLineFuzzy(num) {
return parseInt(num) - 0.5
}
</script>
</html>
结语
以上就是 HTML5 的 canvas 实现绘制标尺网格的详细内容，希望对大家有帮助，更多请关注www.mimiwuqi.com的其它相关文章！