canvas使用arc()画园有毛边，如图：
，只需给其添加width，height即可，直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆形</title> </head> <body> <canvas class="can-circle" id="circle"></canvas> <script type="text/javascript"> function _circle(canvas,angle){ var ang1 = 270+angle; var ang = ang1/180 * Math.PI; var ctx = canvas.getContext("2d"); //解决毛边 canvas.width = 120; canvas.height = 120; //灰色 ctx.beginPath(); ctx.lineWidth = 10; ctx.strokeStyle = '#ccc'; ctx.arc(60,60,50,0,Math.PI*2); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 10; ctx.strokeStyle = '#6C0'; ctx.arc(60,60,50,Math.PI*1.5,ang); ctx.stroke(); } function fun(id,a){ var b = 0; a = Math.round(a*360); var set = setInterval(function(){ _circle(id,b); b++; if(b === (a+1)){ clearInterval(set); } },0); } fun(document.getElementById("circle"),0.8); document.getElementById("circle").onmouseenter = function(){ fun(document.getElementById("circle"),0.8); } </script> </body> </html>
运行后：
，这样是不是美观了很多？
看上面代码可知，解决毛边的主要两句代码是：
canvas.width = 120; canvas.height = 120;
此widthheight可以任意设置，只是为了美观，不遮盖其他文件即本身现实才都设置为了120px。注意，此处widthheight的单位不用添加，默认是px。