怎么在html5中使用canvas創(chuàng)建一個(gè)太空游戲-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)怎么在html5中使用canvas創(chuàng)建一個(gè)太空游戲，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

目前累計(jì)服務(wù)客戶上1000家，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗(yàn)。以網(wǎng)站設(shè)計(jì)水平和技術(shù)實(shí)力，樹立企業(yè)形象，為客戶提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷、VI設(shè)計(jì)、網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。成都創(chuàng)新互聯(lián)公司始終以務(wù)實(shí)、誠(chéng)信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過(guò)對(duì)領(lǐng)先技術(shù)的掌握、對(duì)創(chuàng)意設(shè)計(jì)的研究、對(duì)客戶形象的視覺(jué)傳遞、對(duì)應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進(jìn)步。

1.向網(wǎng)頁(yè)添加 Canvas 元素
2.創(chuàng)建黑色背景
3.在背景上繪制隨機(jī)星星
4.向背景添加宇宙飛船
代碼示例的末尾是討論材料，說(shuō)明有關(guān)這些任務(wù)的設(shè)計(jì)和結(jié)構(gòu)以及工作方式的詳細(xì)信息。
Canvas 代碼示例:

代碼如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// This function is called on page load.
function canvasSpaceGame() {
// Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext)
// If you have it, create a canvas user inteface element.
{
// Specify 2d canvas type.
ctx = canvas.getContext("2d"); // Paint it black.
ctx.fillStyle = "black";
ctx.rect(0, 0, 300, 300);
ctx.fill(); // Paint the starfield.
stars(); // Draw space ship.
makeShip();
}
} // Paint a random starfield. 
function stars() { // Draw 50 stars.
for (i = 0; i <= 50; i++) {
// Get random positions for stars.
var x = Math.floor(Math.random() * 299)
var y = Math.floor(Math.random() * 299) // Make the stars white
ctx.fillStyle = "white"; // Give the ship some room.
if (x < 30 || y < 30) ctx.fillStyle = "black"; // Draw an individual star.
ctx.beginPath();
ctx.arc(x, y, 3, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
} function makeShip() { // Draw saucer bottom.
ctx.beginPath();
ctx.moveTo(28.4, 16.9);
ctx.bezierCurveTo(28.4, 19.7, 22.9, 22.0, 16.0, 22.0);
ctx.bezierCurveTo(9.1, 22.0, 3.6, 19.7, 3.6, 16.9);
ctx.bezierCurveTo(3.6, 14.1, 9.1, 11.8, 16.0, 11.8);
ctx.bezierCurveTo(22.9, 11.8, 28.4, 14.1, 28.4, 16.9);
ctx.closePath();
ctx.fillStyle = "rgb(222, 103, 0)";
ctx.fill(); // Draw saucer top.
ctx.beginPath();
ctx.moveTo(22.3, 12.0);
ctx.bezierCurveTo(22.3, 13.3, 19.4, 14.3, 15.9, 14.3);
ctx.bezierCurveTo(12.4, 14.3, 9.6, 13.3, 9.6, 12.0);
ctx.bezierCurveTo(9.6, 10.8, 12.4, 9.7, 15.9, 9.7);
ctx.bezierCurveTo(19.4, 9.7, 22.3, 10.8, 22.3, 12.0);
ctx.closePath();
ctx.fillStyle = "rgb(51, 190, 0)";
ctx.fill();
}
</script>
</head>
<body onload="canvasSpaceGame()">
<h2>
Canvas Space Game
</h2>
<canvas id="myCanvas" width="300" height="300">
</canvas>
</body>
</html>

Canvas 代碼示例討論

本節(jié)說(shuō)明本代碼示例的設(shè)計(jì)和結(jié)構(gòu)。它為您講解代碼的不同部分，以及整合它們的方式。 Canvas 示例使用標(biāo)準(zhǔn) HTML5 標(biāo)頭，以便瀏覽器可以將它作為 HTML5 規(guī)格的一部分加以區(qū)別。

代碼分成兩個(gè)主要部分：
1.主體代碼
2.腳本代碼

主體代碼
在頁(yè)面加載時(shí)，主體標(biāo)記使用 onload 函數(shù)調(diào)用 canvasSpaceGame 函數(shù)。 Canvas 標(biāo)記是主體的一部分。指定了 Canvas 初始寬度和高度，還指定了 ID 屬性。必須使用 ID，才能將 canvas 元素添加到頁(yè)面的對(duì)象模型中。

腳本代碼
腳本代碼包括三個(gè)函數(shù)： canvasSpaceGame、stars 和 makeShip。加載頁(yè)面時(shí)將調(diào)用 canvasSpaceGame 函數(shù)。 stars 和 makeShip 都是從 canvasSpaceGame 調(diào)用的。

canvasSpaceGame 函數(shù)
加載頁(yè)面時(shí)將調(diào)用此函數(shù)。它通過(guò)在主體代碼中使用 Canvas 元素 ID 來(lái)獲取畫布，然后獲取畫布的上下文，并準(zhǔn)備好接受繪圖。將上下文初始化為 2D 畫布后，使用 fillStyle、rect 和 fill 方法將畫布繪制為黑色。

stars 函數(shù)
此函數(shù)是從 canvasSpaceGame 調(diào)用的。它使用 for loop 在二維平面上生成 50 個(gè)潛在的星星位置，然后使用 fillStyle 創(chuàng)建白色。隨后，會(huì)進(jìn)行一項(xiàng)檢查，確認(rèn) x,y 坐標(biāo)是否與左上角過(guò)于靠近。如果星星繪制得與左上角過(guò)于靠近，則會(huì)將 fillStyle 更改為黑色，使其不會(huì)妨礙宇宙飛船。隨后，使用 arc 方法繪制每個(gè)星星并使用相應(yīng)的填充顏色。
makeShip
此函數(shù)是從 canvasSpaceGame 調(diào)用的。使用一系列的 beginPath、moveTo、bezierCurveTo、closePath、fillStyle 和 fill 方法，繪制一個(gè)簡(jiǎn)單的宇宙飛船。
飛船是通過(guò)繪制兩個(gè)橢圓來(lái)創(chuàng)建的，一個(gè)橢圓在另一個(gè)的上面。它首先在 Adobe Illustrator CS5 中繪制，然后使用的 Ai2Canvas 插件將圖像導(dǎo)出到 Canvas。

關(guān)于怎么在html5中使用canvas創(chuàng)建一個(gè)太空游戲就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)題目：怎么在html5中使用canvas創(chuàng)建一個(gè)太空游戲-創(chuàng)新互聯(lián)
分享鏈接：http://muchs.cn/article24/djieje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站設(shè)計(jì)、虛擬主機(jī)、建站公司、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容