html5的canvas畫三角形和圓形，以及太極陣
阿新 • • 發佈：2019-02-09
//實現結合圓形畫出太極陣
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="500" height="500" style="background-color:#00FFFF; border:1px solid red;" > Your browser does not support the canvas element. //您的瀏覽器不支援canvas控制元件 </canvas> <script type = "text/javascript"> var canvas = document.getElementById("myCanvas");//獲取canvas物件 //簡單的檢測一下當前瀏覽器是否支援canvas物件,以免在一些不支援html5的瀏覽器上出現語法錯誤 if(canvas.getContext){ //獲取對應的CanvasRenderingContext2D物件 var ctx = canvas.getContext("2d"); //右邊的紅色半圓 ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(200,200,150,0.5*Math.PI,1.5*Math.PI,false); ctx.closePath(); ctx.fill(); //左邊的半圓 ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(200,200,150,0.5*Math.PI,1.5*Math.PI,true); ctx.closePath(); ctx.fill(); //小上半圓 ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(200,125,75,0.5*Math.PI,1.5*Math.PI,true); ctx.closePath(); ctx.fill(); //小下半圓 ctx.fillStyle = "black" ctx.beginPath(); ctx.arc(200,275,75,0.5*Math.PI,1.5*Math.PI,false); ctx.closePath(); ctx.fill(); //上部小圓 ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(200,125,20,0,2*Math.PI,false); ctx.closePath(); ctx.fill(); //下部小圓 ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(200,275,20,0,2*Math.PI,true); ctx.closePath(); ctx.fill(); } </script> </body> </html>