如何使用JavaScript实现点击按钮在Canvas上绘制圆形及代码问题排查

问题修复说明 #

你现有代码存在2处明显错误，修改后即可实现预期效果：

• 语法错误：JS代码中ctx.arc(X, Y, R, O, 2 * Math.PI, false)行的第四个参数使用了大写字母O，应该替换为数字0，未定义的变量O会直接触发JS报错，导致绘制逻辑完全中断。
• 画布配置错误：仅在CSS中设置canvas的显示宽高是无效的，必须在canvas标签上显式声明width和height属性定义绘图坐标系的尺寸，否则canvas默认使用300*150的坐标系，拉伸显示后会导致图形变形、坐标计算错误。

修正后的完整代码 #

JavaScript代码

function draw() {
  // 获取画布对象
  let canvas = document.getElementById("mycanvas");
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    // 计算圆心坐标
    let X = canvas.width / 2;
    let Y = canvas.height / 2;
    // 定义圆半径
    let R = 45;
    // 开始绘制圆形
    ctx.beginPath();
    // 已将错误的O修改为数字0
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    // 设置描边宽度
    ctx.lineWidth = 3;
    // 设置描边颜色
    ctx.strokeStyle = "#111";
    // 执行描边绘制
    ctx.stroke();
  }
}

CSS代码

canvas {
  height: 300px;
  width: 300px;
}

.mybutton {
  background: #964b00;
  color: #fff;
  font-size: 22px;
  padding: 5px;
  font-family: serif;
  text-align: center;
}

HTML代码

<!-- 声明绘图用canvas对象，新增width和height属性定义绘图尺寸 -->
<center><canvas id="mycanvas" width="300" height="300"></canvas></center>
<center><button class="mybutton" onclick="draw()">mybutton</button></center>

修改完成后点击按钮即可在canvas上正常绘制出黑色边框的圆形。

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