Canvas绘制路径【每日一段代码8】

<DOCTYPE HTML>
<html>
<head>
<title>笑脸</title>
<script type="text/javascript">
function drawShape(){
var c = document.getElementById("myCanvas");
if (c.getContext){
var cxt = c.getContext("2d");
cxt.strokeStyle="#FF0000";
cxt.beginPath();
cxt.arc(75,75,50,0,Math.PI*2,true);
cxt.moveTo(110,75);
cxt.arc(75,75,35,0,Math.PI,false);
cxt.moveTo(65,65);
cxt.arc(60,65,5,0,Math.PI*2,true);
cxt.moveTo(95,65)
cxt.arc(90,65,5,0,Math.PI*2,true);
cxt.stroke();
}
else{
alert("您的浏览器不支持。");
}
}
</script>
</head>

<body onLoad="drawShape()">
<canvas id="myCanvas" height="150" width="150" style="border:#0000FF 2px
solid;"></canvas>
</body>
</html>

 

显示图如下：

【实例演示Canvas绘制路径，绘制路径和绘制矩形是不同的。首先要使用函数beginPath()创建一个路径，第二使用绘制函数绘制，第三闭合路径，最后调用stroke()或fill()方法，实际完成绘制。实例当中主要用到moveTo()函数，此方法是将绘制起点从某个点移动到另一个点，绘制不连续的路径经常用到。】

posted on 2012-02-01 13:42  Cosimo  阅读(302)  评论(0)    收藏  举报

导航