0

キャンバス内に円弧を描画しようとしていますが、その円弧を作成してキャンバスを塗りつぶしたいと考えています。

弧をキャンバスの半分のサイズにしようとしましたが、完全に機能しますが、半径を大きくしてキャンバスと同じ幅にするとエラーが見つかります...弧の幅は良いですが、高さは大きくなり、消えてしまいます半径が y 軸を 2 倍にしているように感じます。

そして、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>
4

1 に答える 1

0

CSS ではなく、canvas 要素自体で幅と高さを設定します。

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>
于 2013-07-13T17:45:56.180 に答える