[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具) - gho(2)_H5之家

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script> 10 window.onload = function () { 11 var oCanvas = document.querySelector("#canvas"), 12 oGc = oCanvas.getContext('2d'); 13 14 oGc.strokeStyle = 'red'; 15 oGc.moveTo( 234, 224 ); 16 oGc.bezierCurveTo( 301, 68, 454, 361, 555, 162 ); 17 oGc.stroke(); 18 } 19 </script> 20 </head> 21 <body> 22 <canvas></canvas> 23 </body>

画一个饼图：

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script> 10 window.onload = function () { 11 var oCanvas = document.querySelector("#canvas"), 12 oGc = oCanvas.getContext('2d'); 13 14 oGc.beginPath(); 15 oGc.fillStyle = 'red'; 16 oGc.moveTo( 300, 200 ); 17 oGc.arc( 300, 200, 100, 0 * Math.PI / 180, 120 * Math.PI / 180, false ); 18 oGc.closePath(); 19 oGc.fill(); 20 21 oGc.beginPath(); 22 oGc.fillStyle = 'orange'; 23 oGc.moveTo( 300, 200 ); 24 oGc.arc( 300, 200, 100, 120 * Math.PI / 180, 240 * Math.PI / 180, false ); 25 oGc.closePath(); 26 oGc.fill(); 27 28 oGc.beginPath(); 29 oGc.fillStyle = '#09f'; 30 oGc.moveTo( 300, 200 ); 31 oGc.arc( 300, 200, 100, 240 * Math.PI / 180, 360 * Math.PI / 180, false ); 32 oGc.closePath(); 33 oGc.fill(); 34 } 35 </script> 36 </head> 37 <body> 38 <canvas></canvas> 39 </body>

画一个圆角矩形：

1 <style> 2 body { 3 background: #000; 4 } 5 #canvas { 6 background: white; 7 } 8 </style> 9 <script> 10 window.onload = function () { 11 var oCanvas = document.querySelector("#canvas"), 12 oGc = oCanvas.getContext('2d'); 13 14 oGc.strokeStyle = 'red'; 15 oGc.lineWidth = '2px'; 16 oGc.moveTo( 200, 100 ); 17 oGc.lineTo( 500, 100 ); 18 oGc.arcTo( 600, 100, 600, 200, 100 ); 19 oGc.moveTo( 600, 200 ); 20 oGc.lineTo( 600, 400 ); 21 oGc.arcTo( 600, 500, 500, 500, 100 ); 22 oGc.moveTo( 500, 500 ); 23 oGc.lineTo( 200, 500 ); 24 oGc.arcTo( 100, 500, 100, 400, 100 ); 25 oGc.moveTo( 100, 400 ); 26 oGc.lineTo( 100, 200 ); 27 oGc.arcTo( 100, 100, 200, 100, 100 ); 28 oGc.stroke(); 29 } 30 </script> 31 </head> 32 <body> 33 <canvas></canvas> 34 </body>