canvas学习绘制扇形
1.自己用canvas绘制的一个丑丑的扇形(两个圆弧+一个梯形)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> canvas{background:#333333;} </style> </head> <body> <canvas id="acanvas" width="500" height="500"> 您的浏览器不支持html5的canvas元素 </canvas> <script type="text/javascript"> var canvas=document.getElementById('acanvas'); var p=canvas.getContext('2d'); p.lineWidth=2; p.strokeStyle="yellow"; p.fillStyle="yellow"; p.moveTo(100,250); p.lineTo(400,250); p.lineTo(350,300); p.lineTo(150,300); p.fill(); p.stroke() p.beginPath(); p.arc(250,510,301,Math.PI*4/3,Math.PI*5/3); p.fill(); p.beginPath(); p.fillStyle="#333333"; p.arc(250,475,201,Math.PI*4/3,Math.PI*5/3); p.fill(); </script> </body> </html>
2.从视频中学习的canvas绘画扇形(两个扇形组合成一个扇子的模样)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> canvas{background:#A9A9A0;} </style> </head> <body> <canvas id="bcanvas" width="800" height="800"> 您的浏览器暂不支持HTML5的canvas元素 </canvas> <script type="text/javascript"> var canvas=document.getElementById('bcanvas'); var pi=canvas.getContext('2d'); pi.lineWidth=2; pi.strokeStyle="yellow"; pi.fillStyle="orange"; pi.moveTo(400,500); pi.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false); pi.closePath(); pi.fill(); pi.beginPath(); pi.strokeStyle="orange"; pi.fillStyle="#A9A9A0"; pi.moveTo(400,500); pi.arc(400,500,150,Math.PI*7/6,Math.PI*11/6,false); pi.closePath(); pi.fill(); </script> </body> </html>