Ich versuche nur, einen Kreis mit einem dicken Anti-Aliased Strich in Leinwand zu machen.HTML5 Canvas Strich nicht anti-aliased
Der Kreis wird wie erwartet gezeichnet, aber die Kanten des Strichs sind sehr ungleichmäßig. Ich halte das Lesen, dass Chrome zwingt Anti-Aliasing, so dass nicht sicher, was zu tun ...
Fiddle: 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>
Die 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>