canvas弧線與圓
阿新 • • 發佈：2018-11-15
繪製一條弧線
context.arc(
centerx,centery,radius,
startingAngle,endingAngle,
anticlockwise = false//順時針預設 true逆時針
)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"> </canvas> </body> </html>
<script type="text/javascript"> /*context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false//順時針預設 true逆時針 )*/ window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; var context = canvas.getContext('2d'); context.lineWidth = 5; context.strokeStyle = '#005588'; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); context.closePath(); context.stroke(); } for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10); context.stroke(); } } </script>