HTML5是一種非常流行的網頁編程語言,它的畫圖功能也非常強大,我們可以通過HTML5來實現畫圓。以下是一個簡單的HTML5畫圓的代碼:
<canvas id="myCanvas" width="200" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = '#ff0000'; context.fill(); context.lineWidth = 5; context.strokeStyle = '#003300'; context.stroke(); </script>
我們首先在HTML中定義了一個canvas元素,寬高都為200像素,然后通過JavaScript獲取到該元素,并且獲取到它的2d上下文。接下來我們定義圓的圓心坐標和半徑,畫出圓的形狀。其中,context.beginPath()表示開始繪制路徑,而context.arc()則是用來繪制圓形的API函數,它的參數分別為:圓心x坐標,圓心y坐標,圓的半徑,起始弧度,結束弧度,以及是否逆時針繪制。這里我們設置了填充色和描邊色,并且我們還可以通過context.lineWidth屬性來設置線寬度。最后,我們通過context.stroke()來實現描邊。
下一篇html5電腦游戲代碼