Canvas入门范例04：画一个笑脸

Canvas入门实例04：画一个笑脸

本文通过画一个笑脸示例canvas弧线的用法

Canvas画弧线的基本方法如下：

?

function drawScreen(){  var context = theCanvas.getContext('2d');    context.strokeStyle = 'black';  context.lineWidth = 5;    // 1) 画最外围的圆，即整个脸  context.beginPath();  context.arc(100, 100, 50, 0, 2*Math.PI, false);  context.stroke();  context.closePath();    // 2) 画嘴巴，这是一个半圆，因为是下半圆，所以要顺时针画  context.beginPath();  context.arc(100, 100, 30, 0, Math.PI, false);  context.stroke();  context.closePath();    // 3) 画右眼，这是一个填充圆，使用 fill() 方法  context.beginPath();  context.arc(80, 80, 5, 0, 2*Math.PI, false);  context.fill();  context.closePath();    // 4) 模仿第三步，画左眼  context.beginPath();  context.arc(120, 80, 5, 0, 2*Math.PI, false);  context.fill();  context.closePath();}

?Okay，画弧很简单吧？但是该方法确实也很强大！

?

?

?

?