Canvas学习札记(六)-绘图（综合使用）_H5之家 - 中国HTML5教程资源分享第一站

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"> <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></canvas> </body> </html> ?