當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形

發(fā)布時間：2023/12/19 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

本節(jié)書摘來自華章計算機《HTML5 Canvas游戲開發(fā)實戰(zhàn)》一書中的第2章，第2.1節(jié),作者：張路斌著，更多章節(jié)內容可以訪問云棲社區(qū)“華章計算機”公眾號查看。

2.1　繪制基本圖形

所謂基本圖形，就是指線、矩形、圓等最簡單的圖形，任何復雜的圖形都是由這些簡單的圖形組合而成的。我們首先來了解一下這些簡單圖形的繪制方法。
2.1.1　畫線
你可能是第一次接觸Canvas繪圖。首先，我們通過繪制一個簡單的直線來學習Canvas的功能。其代碼如代碼清單2-1所示。
代碼清單　2-1

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100"> 你的瀏覽器不支持HTML5 </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(150,50); ctx.stroke(); </script> </body> </html>

運行后的效果圖如圖2-1所示。

下面來解釋一下代碼清單2-1中的代碼。

<canvas id="myCanvas" width="200" height="100"> 你的瀏覽器不支持HTML5 </canvas>

這是在HTML中嵌入Canvas標簽。Canvas標簽內部可以添加文字或HTML代碼，如果瀏覽不支持Canvas標簽，那么瀏覽器會自動跳過Canvas標簽而運行Canvas內部的HTML代碼。

var c=document.getElementById("myCanvas");

以上代碼是獲取HTML中的Canvas標簽。

var ctx=c.getContext("2d");

這里返回一個用來繪制環(huán)境類型的環(huán)境。它返回的是一個 CanvasRenderingContext2D 對象，該對象實現(xiàn)了一個畫布所使用的大多數(shù)方法。目前，Canvas只支持二維環(huán)境，所以參數(shù)只能是“2d”。當然，將來也可能會支持三維。

ctx.lineWidth = 10;

以上代碼用來設置線條寬度。

ctx.strokeStyle = "red";

此處設置畫筆顏色為紅色，這里的顏色值可以是英文字母，也可以直接使用顏色的RGB值，如紅色為“#ff0000”，黑色為rgb(0,0,0)等。

ctx.beginPath();

以上代碼創(chuàng)建一個新的路徑。

ctx.moveTo(10,10);

以上代碼將畫筆光標位置移動到坐標(10,10)處。

ctx.lineTo(150,50);

以上代碼從當前坐標開始移動畫筆到坐標(150,50)處，繪制一條直線。

ctx.stroke();

上面代碼表示開始繪制定義好的路徑。
以上過程其實和我們在紙上畫一條線是同樣的道理，首先我們要選擇一種顏色及線條的粗細，然后用畫筆從一個點開始畫到另一個點，這樣就可以畫出一條線了。
在畫線的時候，也可以使用lineCap來定義線帽的樣式，如在代碼清單2-2中，分別使用了lineCap的3種樣式。
代碼清單　2-2

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "red";ctx.lineCap="butt"; ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(150,10); ctx.stroke();ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(10,40); ctx.lineTo(150,40); ctx.stroke();ctx.lineCap="square"; ctx.beginPath(); ctx.moveTo(10,70); ctx.lineTo(150,70); ctx.stroke();

運行代碼，可以看到3種不同的線帽，如圖2-2所示。

2.1.2　畫矩形
下面來看看如何畫一個矩形，其代碼如代碼清單2-3所示。
代碼清單　2-3

運行效果如圖2-3所示。

在Canvas里，用strokeRect函數(shù)來繪制一個矩形，它需要4個參數(shù)，分別是：起點坐標x和坐標y、矩形長、矩形寬。
也可以用下面代碼來替換strokeRect函數(shù)，它可以實現(xiàn)同樣的功能。

ctx.rect(10,10,70,40); ctx.stroke();

如果要繪制一個實心的矩形，可以用fillRect函數(shù)，如代碼清單2-4所示。
代碼清單　2-4

運行效果如圖2-4所示。

fillRect函數(shù)同樣需要4個參數(shù)，分別是：起點的坐標x和坐標y、矩形長、矩形寬。與strokeRect函數(shù)不同的是，畫實心圖形的時候，用fillStyle來定義圖形的顏色。
當然，這里也可用另一種實現(xiàn)方法繪制矩形，代碼如下：

ctx.rect(10,10,70,40); ctx.fill();

2.1.3　畫圓
圓其實就是一個360度的圓弧。在Canvas中，可使用arc函數(shù)來畫一個圓弧。先看代碼清單2-5所示代碼。
代碼清單　2-5

運行效果如圖2-5所示。

arc函數(shù)的6個參數(shù)分別是：圓弧中心的坐標x和坐標y、圓弧半徑、起始角度、終止角度、是否逆時針。需要解釋的是，第4個和第5個參數(shù)需要傳入的是圓弧的弧度，如要畫30度的角，需要將其轉化成弧度30*Math.PI/180；第6個參數(shù)用來控制圓弧是順時針旋轉還是逆時針旋轉。
和畫矩形一樣，同樣可以用fill函數(shù)來畫一個實心的圓弧，如代碼清單2-6所示。
代碼清單　2-6

運行效果如圖2-6所示。

畫圓時，只需要讓起始角度和終止角度之差為360度即可，具體代碼如代碼清單2-7所示。
代碼清單　2-7

運行效果如圖2-7所示。

2.1.4　畫圓角矩形
Canvas中沒有直接畫圓角矩形的API，但是我們可以用arcTo函數(shù)來完成圓角的繪制，然后結合直線繪制，就可以完成圓角矩形的繪制了。在繪制圓角矩形之前，我們先來繪制一個圓角，如代碼清單2-8所示。
代碼清單　2-8

運行效果如圖2-8所示。

在代碼清單2-8中，arcTo函數(shù)是用來為當前的子路徑添加一條圓弧的，它需要5個參數(shù)，分別是：點P1的坐標x和坐標y、點P2的坐標x和坐標y、圓弧的半徑radius。該圓弧有一個點與當前位置到 P1 的線段相切，還有一個點和從 P1 到 P2 的線段相切。這兩個切點就是圓弧的起點和終點，圓弧繪制的方向就是連接這兩個點的最短圓弧的方向。
在很多常見的應用中，圓弧開始于當前位置而結束于 P2，但情況并不總是這樣。如果當前的位置和圓弧的起點不同，這個方法將會添加一條從當前位置到圓弧起點的直線，而且總是將當前位置設置為圓弧的終點。
有了對arcTo函數(shù)的了解，畫圓角矩形就簡單多了，如代碼清單2-9所示。
代碼清單　2-9

運行效果如圖2-9所示。

2.1.5　擦除Canvas畫板
擦除Canvas畫板上的內容需要用到clearRect函數(shù)，此函數(shù)可以擦除一個矩形區(qū)域。它需要4個參數(shù)：起點的坐標x和坐標y，擦除區(qū)域的長和寬。其用法如代碼清單2-10所示。
代碼清單　2-10

<canvas id="myCanvas" width="200" height="100"> 你的瀏覽器不支持HTML5 </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle = "red"; ctx.beginPath(); ctx.fillRect(10,10,200,100); ctx.clearRect(30,30,50,50); </script>

上面的代碼先繪制了一個紅色的實心矩形，然后在紅色矩形中間擦除了一個50×50的小矩形，效果如圖2-10所示。

總結

以上是生活随笔為你收集整理的《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ttc error oracle,ORA
下一篇： html5简介的文本框,HTML5实战与

HTML

《HTML5 Canvas游戏开发实战》——2.1 绘制基本图形

2.1 繪制基本圖形

總結

《HTML5 Canvas游戏开发实战》——2.1　绘制基本图形

2.1　繪制基本圖形