Question

我现在遇到一个问题，即在画布上添加一个圆圈。我需要制作一个图表。我已将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>

我尝试使用arc方法绘制一个圆形，如下所示：

context.beginPath();
context.arc(50,325,20,0,2*Math.PI);
context.stroke();

我的画布上没有任何内容。

据我可以在线建立，这是执行此操作的标准方法。

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

Answer 1

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

context.arc（50,325,20,0,2 * Math.PI，FALSE）;

Answer 2

strokeText方法缺少参数：

context.strokeText();

应该是：

context.strokeText(txt, x, y);

由于它们缺失，脚本将失败并停止在其后执行任何操作：
的 A demo fiddle

fillText()和strokeText()不会添加到路径中，因此如果您想要将其轮廓放在最上面，则需要再次绘制相同的文本。

除此之外arc是正确的。您可以在抚摸它之前添加closePath()。

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

2 个答案: