# Canvas学习札记(六)-绘图（综合使用）

www.MyException.Cn  网友分享于：2013-11-23  浏览：15次
Canvas学习笔记(六)--绘图（综合使用）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
.wraper {
position: relative;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
var can = document.getElementById('test');
if(can.getContext){
var cxt = can.getContext('2d');

//绘制左侧黑色区域
cxt.beginPath();
cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,false);
cxt.bezierCurveTo(20,100,180,100,100,180);
cxt.fill();

//绘制右侧白色区域
cxt9.beginPath();
cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,true);
cxt.stroke();

//绘制右侧黑色圆圈
cxt.beginPath();
cxt.moveTo(120,60);
cxt.arc(120,60,15,0,Math.PI*2,true);
cxt.fill();

//绘制左侧白色圆圈
cxt.fillStyle = "rgba(255,255,255,1)";
cxt.beginPath();
cxt.moveTo(80,140);
cxt.arc(80,140,15,0,Math.PI*2,true);
cxt.fill();

}
}
</script>

<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

</body>
</html>