如何使用 javascript 单击按钮绘制圆圈

Question

我决定今天尝试 JavaScript 图形，我设法找到一个名为 draw() 的函数，它应该从 canvas 对象获取绘图上下文并调用一些绘图方法从 canvas 对象绘制图形。

逻辑

我硬编码了一个 canvas html 标签并给了它一个 id.. 从我的 JavaScript draw() 函数访问 canvas 对象，然后访问相同的 canvas 二维绘图上下文，并对二维绘图上下文中的绘图方法调用一些镜头对象。

预期

我希望我的代码在单击绘图按钮时在正文标签的 canvas 上绘制一个黑色圆圈，但是 draw() 功能似乎有问题请帮助

function draw() {
  //get the drawing canvas
  let canvas = document.getElementById("mycanvas");
  //check if the context returns true
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    //get the co ordinates
    let X = canvas.width / 2;
    let Y = canvas.height / 2;
    //define the radius
    let R = 45;
    //begin drawing the circle
    ctx.beginPath();
    ctx.arc(X, Y, R, O, 2 * Math.PI, false);
    //set the thickness of the draw print
    ctx.lineWidth = 3;
    //set the color of the draw print
    ctx.strokeStyle = "#111";
    //start drawing the object
    ctx.stroke();
  }
}

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

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

<!--declare a canvas object we will use to draw the circle-->
<center><canvas id="mycanvas"></canvas></center>
<center><button class="mybutton" onclick="draw()">mybutton</button></center>

Answer 1

您为 sAngle 参数传递了一个未定义的变量 (O)。

我假设您打算传递 0 使其工作（以弧度表示，0 位于圆弧的第三点钟位置）

function draw() {
  //get the drawing canvas
  let canvas = document.getElementById("mycanvas");
  //check if the context returns true
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    //get the co ordinates
    let X = canvas.width / 2;
    let Y = canvas.height / 2;
    //define the radius
    let R = 45;
    //begin drawing the circle
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    //set the thickness of the draw print
    ctx.lineWidth = 3;
    //set the color of the draw print
    ctx.strokeStyle = "#111";
    //start drawing the object
    ctx.stroke();
  }
}

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

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

<!--declare a canvas object we will use to draw the circle-->
<center><canvas id="mycanvas"></canvas></center>
<center><button class="mybutton" onclick="draw()">mybutton</button></center>

Answer 2

请定义给出错误的 'O' 变量。在 draw() 中添加 let O =50 你会得到结果

如何使用 javascript 单击按钮绘制圆圈

How to draw a circle with on button click with javascript

html

javascript

canvas