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

lib · 发表于 2013-1-24 06:37:00

首先看看需要完成的图像：

代码如下：

<!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"> <head> <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> </head> <body ><canvas id="test" width="200px" height="200px" class="wraper"></canvas> </body></html>

		自动登录	找回密码
密码			立即注册