this html code draw smiley face. after tried out, saw there lines. there lines in eyes in place of radius. , mouth too. how can remove 3 radius lines?
</head> <body onclick="line();"> <canvas id="canvas" width="1000" height="500"></canvas> <script> function line() { var canvas = document.getelementbyid('canvas'); if(canvas.getcontext) { var lines = canvas.getcontext('2d'); lines.beginpath(); lines.arc(275,275,150,0,math.pi*2,true); lines.moveto(280, 275); lines.arc(275, 275, 100, 0, math.pi, false); lines.moveto(210,220); lines.arc(210, 220, 20, 0, math.pi*2, true); lines.moveto(350, 220); lines.arc(350, 220, 20, 0, math.pi*2, true); lines.stroke(); } } </script> </body>
your moveto() calls going center point of each of arcs. arcs drawn starting perimeter, path goes center perimeter before starting arc.
to fix change moveto() calls right point on arc (this drawing starts). here fix:
function line() { var canvas = document.getelementbyid('canvas'); if(canvas.getcontext) { var lines = canvas.getcontext('2d'); lines.beginpath(); lines.arc(275,275,150,0,math.pi*2,true); lines.moveto(375, 275); lines.arc(275, 275, 100, 0, math.pi, false); lines.moveto(230,220); lines.arc(210, 220, 20, 0, math.pi*2, true); lines.moveto(370, 220); lines.arc(350, 220, 20, 0, math.pi*2, true); lines.stroke(); } } 
Comments
Post a Comment