Sadece tuvale kalın bir kenar yumuşatma vuruşlu bir daire çizmeye çalışıyorum.HTML5 Tuval konturu kenar yumuşatılmamış
Daire beklendiği gibi çizilir, ancak konturun kenarları çok titrektir. Chrome kadar değil ne yapmanız gerektiğinden emin anti-aliasing, ...
Fiddle zorlar okumaya devam edin: http://jsfiddle.net/nipponese/hWsxw/
HTML
<div id="main">
<canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas>
<div id="counter" style="height: 100px; width: 100px; border: 1px solid #000">
</div>
</div>
JS + jQuery
<script>
function calc(myVal) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = 70;
ctx.beginPath();
ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
ctx.lineWidth = 14;
ctx.stroke();
};
$(document).ready(function() {
var count = 0;
var parsedCount;
function go(){
if (count <= 200) {
parsedCount = count*.01
$('#counter').html('<p>' + parsedCount + '</p>');
calc(parsedCount);
count++;
}
}
setInterval(go, 10)
});
</script>