用JavaScript获取图片尺寸匹配canvas实现放射状文字链接效果

DevOps 小满

2026-9-29

问题根因

getElementsByClassName返回的是匹配类名的元素集合，不是单个DOM元素，直接取.width会返回undefined
脚本执行时图片还未完成加载，此时读取图片尺寸会得到0或空值
仅通过CSS设置了canvas的显示宽高，未设置canvas元素本身的width/height属性，会导致绘制内容拉伸变形
canvas的定位用了固定的margin百分比和固定宽高，和图片的响应式规则不绑定，无法自适应对齐

修复方案

调整DOM结构把canvas和图片放在同一个父容器内，方便定位对齐，再修改JS逻辑，等图片加载完成后再获取尺寸、初始化canvas。

调整后的HTML

<div class="logo-wrapper">
  <canvas id="myCanvas">Error</canvas>
  <img class="logo_centrale" src="img.png" alt="Errore" >
</div>

调整后的CSS

body {
  position: fixed;
  background-color: black;
  margin: 0;
}
* {
  box-sizing: border-box;
}
.logo-wrapper {
  position: relative;
  width: 45%;
  margin: 10% auto 0;
}
.logo_centrale{   
  z-index: -1;
  width: 100%;
  display: block;
}
#myCanvas{  
  z-index: 2;
  position:absolute;
  left: 0;
  top: 0;
  border: 3px solid #f00;
}

调整后的JS

// 等待页面所有资源加载完成后执行
window.onload = function() {
  const img = document.querySelector('.logo_centrale');
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // 获取图片实际渲染的宽高
  const imgWidth = img.offsetWidth;
  const imgHeight = img.offsetHeight;
  
  // 同时设置canvas的元素属性和CSS样式，保证绘制比例和显示比例一致
  canvas.width = imgWidth;
  canvas.height = imgHeight;
  canvas.style.width = imgWidth + 'px';
  canvas.style.height = imgHeight + 'px';
  
  // 绘制圆形，圆心为图片中心
  const centerX = imgWidth / 2;
  const centerY = imgHeight / 2;
  ctx.beginPath();
  ctx.strokeStyle = '#fff';
  // 半径取宽高最小值的80%，避免超出图片范围
  ctx.arc(centerX, centerY, Math.min(centerX, centerY) * 0.8, 0, 2 * Math.PI);
  ctx.stroke();
}

后续开发提示

后续做放射状文字的话，直接以centerX、centerY为圆心计算每个文字的角度、坐标即可，响应式缩放时只要监听窗口的resize事件，重新获取图片尺寸、更新canvas宽高、重绘内容即可适配。

内容的提问来源于stack exchange，提问作者andrea brullo