使用HTML5/Javascript在画布上绘制圆_Javascript_Html_Canvas_Geometry

使用HTML5/Javascript在画布上绘制圆

javascript html canvas geometry

使用HTML5/Javascript在画布上绘制圆,javascript,html,canvas,geometry,Javascript,Html,Canvas,Geometry,我现在有一个问题，就是在画布上添加一个圆圈。我被要求画一张图表。我已经在画布上添加了x轴和y轴，并且需要添加圆作为图形上的点迄今为止的代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body onload="drawGraph()" > <d

我现在有一个问题，就是在画布上添加一个圆圈。我被要求画一张图表。我已经在画布上添加了x轴和y轴，并且需要添加圆作为图形上的点

迄今为止的代码：

<!DOCTYPE html>
<html>  

<head> 
    <link rel="stylesheet" type="text/css" href="css.css">
</head>

<body onload="drawGraph()" >
    <div id="main">
        <canvas id="theCanvas" width="1100" height="400"></canvas>
    </div>
</body>

</html>

<script type="text/javascript">

function drawGraph () {

//Access the canvas using the ID & set the context:
var a = document.getElementById("theCanvas");
var context = a.getContext("2d");


context.translate(0.5, 0.5);
context.fillStyle = "black";
context.strokeStyle = "black";
context.lineWidth = 3;

//Draw Y Axis:
context.moveTo(50,50);
context.lineTo(50,325);
context.stroke();

//Draw X Axis:
context.moveTo(49,325);
context.lineTo(980,325);
context.stroke();

//"Draw" text for the days of the week on the canvas:
context.font = "15px Arial";
context.fillText("Monday",60,360);
context.fillText("Tuesday",200,360);
context.fillText("Wednesday",340,360);
context.fillText("Thursday",500,360);
context.fillText("Friday",640,360);
context.fillText("Saturday",780,360);
context.fillText("Sunday",920,360);
context.strokeText();


}
</script>

这不会让我的画布上出现任何东西

就我所能在网上建立的而言，这是实现这一目标的标准方法

在这种情况下，我做错了什么吗？

您缺少最后一个参数，这是一个布尔值，指示角度应该逆时针还是顺时针计算：

弧（50325,20,0,2*Math.PI，false）

strokeText

方法缺少参数：

context.strokeText();

应该是：

context.strokeText(txt, x, y);

由于缺少脚本，脚本将失败并停止执行之后的任何操作：

fillText（）

和

strokeText（）

不会添加到路径中，因此如果希望在顶部绘制相同的文本轮廓，则需要再次绘制该文本

除此之外，

弧

在您这样做时是正确的。您可以在敲击之前添加一个

closePath（）

。

最后一个参数是可选的，默认为false。

context.strokeText(txt, x, y);