1. 程式人生 > >h5 畫八卦圖 (課堂練習)

h5 畫八卦圖 (課堂練習)

// 1.畫一個大圓,空心 context.beginPath(); context.strokeStyle = "black"; context.arc(350,350,300,0,Math.PI*2); context.closePath(); context.stroke() // 2.繪製一個半圓,黑色實心 context.beginPath(); context.fillStyle = "black"
; context.arc(350,350,300,Math.PI/2,Math.PI*3/2); context.closePath(); context.fill() // 3.繪製兩個實心的圓 context.beginPath(); context.fillStyle = "white"; context.arc(350,500,150,0,Math.PI*2); context.closePath(); context.fill() context.beginPath(); context.fillStyle = "black"
; context.arc(350,200,150,0,Math.PI*2); context.closePath(); context.fill() // 4.繪製兩個小圓 context.beginPath(); context.fillStyle = "black"; context.arc(350,500,75,0,Math.PI*2); context.closePath(); context.fill() context.beginPath(); context.fillStyle = "white"
; context.arc(350,200,75,0,Math.PI*2); context.closePath(); context.fill()