画布弧y轴溢出

canvas arc y-axis overflow

本文关键字：溢出 布弧      更新时间：2023-09-26

我正试图在画布中绘制一条弧线，我想使该弧线填充画布。

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

当我在jsFiddle中检查它时，它运行得很好。。。也许我需要一些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（）；

以下是代码和Fiddle：http://jsfiddle.net/m1erickson/adGfS/

<!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>
相关文章：