h5 畫八卦圖 (課堂練習)
阿新 • • 發佈:2019-01-22
// 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()