<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>canvas-圓形</title> <style> #canvas{ border: 1px solid palevioletred; } </style> <script> window.onload = function (){ //獲取到canvas元素 var canvas = document.getElementById('canvas'); //獲取canvas中的畫圖環境 var context = canvas.getContext('2d'); //開啟新的一條路徑 context.beginPath(); //繪制圓形 //context.arc(X坐標,Y坐標,半徑,起始位置（弧度制）,結束位置（弧度制）,畫法順序（true:逆時針/false:順時針）); context.arc(100,100,50,0,Math.PI*2/3,false); //描邊 context.stroke(); //開啟新的一條路徑 context.beginPath(); //context.arc(X坐標,Y坐標,半徑,起始位置（弧度制）,結束位置（弧度制）,畫法順序（true:逆時針/false:順時針）); context.arc(300,100,50,0,Math.PI*2/3,true); //描邊 context.stroke(); //開啟新的一條路徑 context.beginPath(); //繪制圓形 //context.arc(X坐標,Y坐標,半徑,起始位置（弧度制）,結束位置（弧度制）,畫法順序（true:逆時針/false:順時針）); context.arc(100,300,50,0,Math.PI*2/3,false); //路徑閉合方法 context.closePath(); //描邊 context.stroke(); //開啟新的一條路徑 context.beginPath(); //context.arc(X坐標,Y坐標,半徑,起始位置（弧度制）,結束位置（弧度制）,畫法順序（true:逆時針/false:順時針）); context.arc(300,300,50,0,Math.PI*2/3,true); //設置邊框的像素 context.lineWidth = 10; //設置邊框的屬性 context.strokeStyle = "blue"; //繪制邊框 context.stroke(); //設置填充屬性 context.fillStyle="red"; //填充 context.fill(); } </script></head><body> <canvas id="canvas" width="500px" height="500px"> </canvas></body></html>
新聞熱點
疑難解答
