1

HTML5でキャンバスで円を描こうとしています。w3schools の例を使用しますが、結果は見苦しく、滑らかではありません。滑らかな円を描くことは可能ですか? （ChromeとIE9で試しました）

私が使用するコード：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(125,120,100,0,2*Math.PI);
ctx.stroke();

=> http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path2 : 元の例 => http://jsfiddle.net/jPeKk/ : 私の試み、より大きく

4

2 に答える 2

0

私にとってうまくいく別の解決策（適切な解決策というよりはハックだと思いますが）は、同じ色で円の周りに線を引くことです。何らかの理由で、これは非常にスムーズになります。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 100, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#775599';
context.fill();

context.beginPath();
context.arc(200, 200, 60, 0, 2 * Math.PI, false);
context.fillStyle = '#775599';
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#775599';
context.stroke();
于 2014-12-20T16:19:33.300 に答える
0

Chrome では、これはここで説明されている既知の問題です - Can I turn off antialiasing on an HTML <canvas> element?

そしてここ - Chrome Windowsでhtml5キャンバスのclip()エッジをアンチエイリアスする方法は?

試す

ctx.webkitImageSmoothingEnabled=true;

ラインをより滑らかにします。

于 2012-11-04T17:12:45.730 に答える