文章/答案/技术大牛

发布

社区首页 >问答首页 >画布圆弧y轴溢出

问画布圆弧y轴溢出
EN

Stack Overflow用户

提问于 2013-07-14 01:32:41

回答 1查看 178关注 0票数 0

我正试着在画布上画一条弧线，我想让这条弧线充满画布。

我试着使圆弧画布的一半大小，我完美地工作，但当我增加半径到与画布相同的宽度时，我发现error...as对于圆弧宽度很好，但是对于高度，它增加了很多，消失了，我感觉半径是y轴的两倍。

当我在jsFiddle中检查它时，它起作用了，perfectly...maybe，我必须用一些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>

javascript

html

canvas

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-07-14 01:45:56

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

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

在css中设置宽度和高度会扭曲您的绘图(正如您已经发现的那样)。

另外，当你想画一个圆的弧形时，一定要调用context.closePath()；

这是代码和一个提琴：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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17632579

复制

相似问题

问画布圆弧y轴溢出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问画布圆弧y轴溢出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问画布圆弧y轴溢出
EN