<!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中的畫(huà)圖環(huán)境 var context = canvas.getContext('2d'); //開(kāi)啟新的一條路徑 context.beginPath(); //繪制圓形 //context.arc(X坐標(biāo),Y坐標(biāo),半徑,起始位置（弧度制）,結(jié)束位置（弧度制）,畫(huà)法順序（true:逆時(shí)針/false:順時(shí)針）); context.arc(100,100,50,0,Math.PI*2/3,false); //描邊 context.stroke(); //開(kāi)啟新的一條路徑 context.beginPath(); //context.arc(X坐標(biāo),Y坐標(biāo),半徑,起始位置（弧度制）,結(jié)束位置（弧度制）,畫(huà)法順序（true:逆時(shí)針/false:順時(shí)針）); context.arc(300,100,50,0,Math.PI*2/3,true); //描邊 context.stroke(); //開(kāi)啟新的一條路徑 context.beginPath(); //繪制圓形 //context.arc(X坐標(biāo),Y坐標(biāo),半徑,起始位置（弧度制）,結(jié)束位置（弧度制）,畫(huà)法順序（true:逆時(shí)針/false:順時(shí)針）); context.arc(100,300,50,0,Math.PI*2/3,false); //路徑閉合方法 context.closePath(); //描邊 context.stroke(); //開(kāi)啟新的一條路徑 context.beginPath(); //context.arc(X坐標(biāo),Y坐標(biāo),半徑,起始位置（弧度制）,結(jié)束位置（弧度制）,畫(huà)法順序（true:逆時(shí)針/false:順時(shí)針）); context.arc(300,300,50,0,Math.PI*2/3,true); //設(shè)置邊框的像素 context.lineWidth = 10; //設(shè)置邊框的屬性 context.strokeStyle = "blue"; //繪制邊框 context.stroke(); //設(shè)置填充屬性 context.fillStyle="red"; //填充 context.fill(); } </script></head><body> <canvas id="canvas" width="500px" height="500px"> </canvas></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
