Javascript 画布圆弧y轴溢出_Javascript_Html_Canvas

Javascript 画布圆弧y轴溢出

javascript html canvas

Javascript 画布圆弧y轴溢出,javascript,html,canvas,Javascript,Html,Canvas,我试图在画布上画一条弧，我想画一条弧来填充画布我试着把弧形变成画布大小的一半，效果很好，但是当我把半径增加到与画布相同的宽度时，我发现了一个错误……至于弧形宽度，它很好，但对于高度，它增加了很多，消失了，我觉得半径是y轴的两倍当我在JSFIDLE中检查它时，它工作得非常完美……也许我必须使用一些css或其他什么 var canvas = document.getElementById("canvas2"); var context = canvas.getContext("2d"); var

我试图在画布上画一条弧，我想画一条弧来填充画布

我试着把弧形变成画布大小的一半，效果很好，但是当我把半径增加到与画布相同的宽度时，我发现了一个错误……至于弧形宽度，它很好，但对于高度，它增加了很多，消失了，我觉得半径是y轴的两倍

当我在JSFIDLE中检查它时，它工作得非常完美……也许我必须使用一些css或其他什么

var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");
var counterClockwise = false;
var x = canvas.width /2;
var y = canvas.height /2;

context.beginPath();
context.arc(x, y, x-9, 0, 2*Math.PI);
context.stroke();

这是html正文：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/font-awesome.css" />
</head>
<body>
<canvas id="canvas2" style="width:207px;height:207px"></canvas>
</body>
</html>

在画布元素本身而不是CSS中设置宽度和高度：

canvas.width=207;
canvas.height=207;

在css中设置宽度和高度会扭曲图形（正如您所发现的）

另外，当你画一条你想成为一个圆的弧时，一定要调用context.closePath（）

下面是代码和小提琴：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas2”）；
var context=canvas.getContext（“2d”）；
宽度=207；
帆布。高度=207；
var x=画布2.width/2；
变量y=canvas2.height/2；
context.beginPath（）；
弧（x，y，x-9，0，2*Math.PI）；
closePath（）；
stroke（）；
}); // end$（函数（）{}）；

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

  var canvas = document.getElementById("canvas2");
  var context = canvas.getContext("2d");

  canvas.width=207;
  canvas.height=207;

  var x = canvas2.width /2;
  var y = canvas2.height /2;

  context.beginPath();
  context.arc(x, y, x-9, 0, 2*Math.PI);
  context.closePath();
  context.stroke();

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas2"></canvas>
</body>
</html>