- HTML5實驗室
- 張磊編著
- 1038字
- 2019-01-09 15:53:49
實驗2 臺球
簡介
臺球源于英國，它是一項在國際上廣泛流行的高雅的室內體育運動，是一種用球桿在臺上擊球，依靠計算得分確定比賽勝負的室內娛樂體育項目。臺球也稱為桌球（中國港、澳地區的稱法）、撞球（中國臺灣地區的稱法）。在沒有開球之前，每個球的擺放位置如圖1-8所示。
圖1-8 桌球
這次，要繪制的就是類似圖1-8的效果。在繪制之前，先來繪制實心圓。
實心圓
CanvasRenderingContext2D提供了fill函數，為一個封閉的區域內填充顏色，如圓形、矩形等。實心圓和空心圓的區別在于：
● 設置實心圓顏色：CanvasRenderingContext2D.fillStyle；
● 設置空心圓路徑顏色：CanvasRenderingContext2D.strokeStyle；
● 填充實心圓：CanvasRenderingContext2D.fill；
● 連接空心圓路徑：CanvasRenderingContext2D.stroke。
掌握了這些，可以輕松地在Canvas中畫一個實心圓：
<canvasid="myCanvas"width="200"height="100"style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<scripttype="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF7F00";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
</script>
效果如圖1-9所示。
圖1-9畫圓
實心圓
掌握了畫實心圓，就可以開始繪制臺球桌面上的16個小球（包括母球）了。在繪制之前，先復習一下初等幾何知識，一個直角三角形，如果有一個角為30°，那么三角形的三個邊的比例如圖1-10所示。
圖1-10 三角形各邊比例
再回到要繪制的臺球，如圖1-11所示。最外層的圓心連成的三角形是等邊三角形，然后被分成兩個直角三角形，等邊三角形的3個角都是60°，所以被分成的直角三角形的三個邊的比例是
。
圖1-11 桌球布局分析
假設母球和離母球最近的頂部的球的位置分別如下：
var parentBall={
position: { x: 200, y: 200 },
r: r,
color: "#fff"
};
var firstBall={
position: { x: 550, y: 200 },
r: r,
color: "#fff"
};
這里用了面向對象的思想分別定義了小球的位置、半徑和顏色。知道了頂部小球的位置，加上上面的分析，可以生成后面一系列小球的坐標：
for (var j=1; j < 5; j++) {
for (var k=0; k < j+1; k++) {
var ball={
position: { x: firstBall.position.x+j * Math.sqrt(3) * r, y: firstBall.position.y -
j * r+2 * k * r },
r: r,
color: "#fff"
};
balls.push(ball);
}
}
把所有生成的球放入一個balls的數組當中，然后調用CanvasRenderingContext2DAPI，根據小球的坐標、顏色和半徑，把所有小球繪制出來：
cxt.fillStyle="#fff";
for (i in balls) {
cxt.beginPath();
cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
完整的代碼如下：
<canvasid="myCanvas"width="847"height="440"style="background-color:#000000">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
var r=10;
var balls=[];
function initBall() { \注：initBall方法生成所有的小球\
var parentBall={
position: { x: 200, y: 200 },
r: r,
color: "#fff"
};
var firstBall={
position: { x: 550, y: 200 },
r: r,
color: "#fff"
};
for (var j=1; j < 5; j++) {
for (var k=0; k < j+1; k++) { \注：根據 firstBall的坐標，通過兩個嵌套的for循環生成所有小球坐標\
var ball={
position: { x: firstBall.position.x+j * Math.sqrt(3) * r, y: firstBall.position.y -
j * r+2 * k * r },
r: r,
color: "#fff"
};
balls.push(ball);
}
}
balls.push(firstBall);
balls.push(parentBall);
}
function draw() {
cxt.fillStyle="#fff";
for (i in balls) {
cxt.beginPath();
cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
initBall();
draw();
</script>
運行效果如圖1-12所示。
圖1-12 在Canvas上模擬繪制
當然，也可以在初始化小球時讓每個小球產生一個隨機顏色，利用下面這種方法產生隨機顏色。
function randomColor() {
var arrHex=["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex="#";
var index;
for (var i=0; i < 6; i++) {
index=Math.round(Math.random() * 15);
strHex +=arrHex[index];
}
return strHex;
}
在初始化小球時調用該方法。
var firstBall={
position: { x: 550, y: 200 },
r: r,
color: randomColor() \注：產生隨機顏色\
};
for (var j=1; j < 5; j++) {
for (var k=0; k < j+1; k++) {
var ball={
position: { x: firstBall.position.x+j * Math.sqrt(3) * r, y: firstBall.position.y -
j * r+2 * k * r },
r: r,
color: randomColor() \注：產生隨機顏色\
};
balls.push(ball);
}
}
在畫球時直接使用小球的color屬性即可。
function draw() {
for (i in balls) {
cxt.fillStyle=balls[i].color; \注：在這里使用\
cxt.beginPath();
cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
}
}
效果如圖1-13所示。
圖1-13 彩色桌球
通過這個實驗，學習了基本的繪制實心圓的方法，并通過不同顏色的小球模擬出桌球的初始擺放。在真實的游戲開發當中，會讓美工畫好具有反光和立體感的小球，然后把對應的位置填上相應的小球圖片，就可以達到最終想要的效果。