畫布弧線y軸溢出

我想在畫布中繪製一條弧線，並且我想讓該弧線填充畫布。畫布弧線y軸溢出

我試圖使弧半帆布的大小，我完美的作品，但是當我增加半徑與畫布相同的寬度，我發現一個錯誤...至於弧寬它的好，但對於它的高度增加很多，消失了，我感覺半徑是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>

來源

2013-07-13 user2531317

設置畫布元素本身的寬度和高度，而不是在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>

來源

2013-07-13 17:45:56 markE

它的工作。謝謝 – user2531317

畫布弧線y軸溢出

回答

相關問題